/* ==========================================================================
   Plugin Styles — Frigoforia re-skin of custom Cookia plugins + WPRM

   Targets the output of:
     - WP Recipe Maker (core + premium)
     - cookia-recipes-adapter
     - cookia-recipes-reader
     - cookia-recipes-submit
     - cookia-recipes-translator
     - cookia-ingredients-manager (admin)
     - cookia-ingredients-inventory (frontend)
     - cookia-shopping-list
     - user-registration auth modal (plugin-emitted fields inside .auth-modal)

   Design tokens are defined in style.css (--ck-*). No raw hex colours for
   brand tones — always go through the token layer.
   ========================================================================== */


/* ==========================================================================
   1. WP Recipe Maker (WPRM)
   ========================================================================== */

.wprm-recipe-container {
/*	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-lg);
	box-shadow: var(--ck-shadow-card);
	padding: 28px 28px 32px;
	margin: 32px 0;*/
	color: var(--ck-ink);
	font-family: var(--ck-font-body);
}

.wprm-recipe-container .wprm-recipe-name,
.wprm-recipe-container h1.wprm-recipe-name,
.wprm-recipe-container h2.wprm-recipe-name {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.15;
	color: var(--ck-text);
	background: none; /* kill any upstream gradient clip */
	-webkit-background-clip: initial;
	-webkit-text-fill-color: currentColor;
	margin: 0 0 12px;
}

.wprm-recipe-container .wprm-recipe-summary {
	color: var(--ck-text-muted);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* --- Times / details → outlined charcoal chips --- */
.wprm-recipe-container .wprm-recipe-times-container,
.wprm-recipe-container .wprm-recipe-time-container,
.wprm-recipe-container .wprm-recipe-details-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0px
}

.wprm-recipe-container .wprm-recipe-time,
.wprm-recipe-container .wprm-recipe-details,
.wprm-recipe-container .wprm-recipe-servings-container,
.wprm-recipe-container .wprm-recipe-course-container,
.wprm-recipe-container .wprm-recipe-cuisine-container {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--ck-text);
	border-radius: var(--ck-radius-pill);
	background: transparent;
	color: var(--ck-text);
	font-family: var(--ck-font-body);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	text-align:left;
}

.wprm-recipe-container .wprm-recipe-time-label,
.wprm-recipe-container .wprm-recipe-details-label {
	color: var(--ck-text-muted);
	font-weight: 500;
	text-transform: none;
	text-align:left;
}

.wprm-recipe-container .wprm-recipe-time-time,
.wprm-recipe-container .wprm-recipe-time-minutes,
.wprm-recipe-container .wprm-recipe-time-hours {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	color: var(--ck-text);
}

/* --- Rating stars → butter --- */
.wprm-recipe-container .wprm-recipe-rating .wprm-rating-star,
.wprm-recipe-container .wprm-recipe-rating svg.wprm-rating-star-full path,
.wprm-recipe-container .wprm-recipe-rating svg.wprm-rating-star-full polygon,
.wprm-recipe-container .wprm-recipe-rating-star-full {
	color: var(--ck-gold);
	fill: var(--ck-gold);
}

.wprm-recipe-container .wprm-recipe-rating svg.wprm-rating-star-empty path,
.wprm-recipe-container .wprm-recipe-rating svg.wprm-rating-star-empty polygon {
	fill: var(--ck-sand-deep);
	stroke: var(--ck-sand-deep);
}

/* --- Ingredients → single-column checklist (design: recipe-detail) ---------
   The page already splits Ingredients | Method, so the list itself is one
   column. Rows are native WPRM checkboxes (list_style="checkbox"): WPRM hides
   the real <input> and draws a pseudo box, and its JS preventDefaults the
   native toggle — the checked state lives on li.wprm-checkbox-is-checked (which
   also strikes the text through). So we hide WPRM's pseudo box, reveal + restyle
   the real <input> as the rounded square, and drive the filled/ticked look off
   that li class. Amounts render terracotta-bold; group names are small green
   labels (see frigoforia.html group_color=var(--ck-leaf)). */
.wprm-recipe-container .wprm-recipe-ingredients-container {
	background: #FFFFFF;
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	padding: 22px 24px;
}

/* Block header stays the serif title; the servings scaler sits under it. */
.wprm-recipe-container .wprm-recipe-ingredients-header,
.wprm-recipe-container .wprm-recipe-ingredients-name {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--ck-text);
	margin: 0 0 14px;
}

/* Group name → small green uppercase label (e.g. "Flan", "Gratin"). */
.wprm-recipe-container .wprm-recipe-ingredient-group-name {
	font-family: var(--ck-font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--ck-leaf);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 1.3;
	margin: 0 0 8px;
}
.wprm-recipe-container .wprm-recipe-ingredient-group + .wprm-recipe-ingredient-group {
	margin-top: 16px;
}

.wprm-recipe-container .wprm-recipe-ingredients {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wprm-recipe-container .wprm-recipe-ingredient {
	display: block;
	position: relative;
	padding: 9px 0 9px 31px;      /* 20px box + 11px gap */
	border-bottom: 1px solid var(--ck-border);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ck-text);
}
.wprm-recipe-container .wprm-recipe-ingredient:last-child {
	border-bottom: none;
}

/* Checkbox — reveal WPRM's real <input> (it is opacity:0) and restyle it as the
   design's rounded square; hide WPRM's pseudo-element box on the label. */
.wprm-recipe-container .wprm-recipe-ingredient .wprm-checkbox-container {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	padding: 0;
	line-height: 1;
}
.wprm-recipe-container .wprm-checkbox-container label.wprm-checkbox-label {
	display: none !important;
}
.wprm-recipe-container .wprm-checkbox-container input[type="checkbox"] {
	opacity: 1 !important;
	appearance: none;
	-webkit-appearance: none;
	width: 20px !important;
	height: 20px;
	margin: 0 !important;
	border: 1.5px solid var(--ck-border);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Checked state lives on the li (WPRM blocks the native :checked). */
.wprm-recipe-container li.wprm-checkbox-is-checked .wprm-checkbox-container input[type="checkbox"] {
	background: var(--ck-leaf);
	border-color: var(--ck-leaf);
}
.wprm-recipe-container li.wprm-checkbox-is-checked .wprm-checkbox-container input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") no-repeat center / 13px 13px;
}

/* Amount + unit → terracotta bold; name dark; notes muted italic with " · ". */
.wprm-recipe-container .wprm-recipe-ingredient-amount,
.wprm-recipe-container .wprm-recipe-ingredient-unit {
	font-weight: 700;
	color: var(--ck-primary);
}

.wprm-recipe-container .wprm-recipe-ingredient-name {
	font-size: 14px;
	color: var(--ck-text);
}

.wprm-recipe-container .wprm-recipe-ingredient-notes {
	color: var(--ck-text-muted);
	font-size: 13px;
	font-style: italic;
}
.wprm-recipe-container .wprm-recipe-ingredient-notes::before {
	content: "· ";
	font-style: normal;
}

/* --- Instructions → step-row style --- */
.wprm-recipe-container .wprm-recipe-instructions-container {
	margin: 24px 0;
}

.wprm-recipe-container .wprm-recipe-instructions-header,
.wprm-recipe-container .wprm-recipe-instructions-name {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--ck-text);
	margin: 0 0 14px;
}

.wprm-recipe-container .wprm-recipe-instructions {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: wprm-step;
}

.wprm-recipe-container .wprm-recipe-instruction {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 16px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px dashed var(--ck-border);
	counter-increment: wprm-step;
}

.wprm-recipe-container .wprm-recipe-instruction:last-child {
	border-bottom: none;
}

.wprm-recipe-container .wprm-recipe-instruction::before {
	content: counter(wprm-step);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ck-sand);
	color: var(--ck-text);
	font: 600 16px/36px var(--ck-font-heading);
	text-align: center;
	display: inline-block;
}

.wprm-recipe-container .wprm-recipe-instruction-text {
	font: 400 14px/1.55 var(--ck-font-body);
	color: var(--ck-ink);
}

/* --- Nutrition → secondary block: macro tiles + aligned micro list ----------
   Deliberately quieter than the main content (smaller header + small icon, no
   white card, modest tiles) — it's reference info read second. recipe-nutrition.js
   lifts the key macros (calories/protein/fat/sugar, when present) out of WPRM's
   .wprm-nutrition-label-container-grouped into .frigoforia-nutrition-macros; the
   rest stay in that list, laid out here as an aligned two-column table. */
.wprm-recipe-container .wprm-nutrition-label-shortcode-container {
	margin-top: 28px;
}

/* Framed card around the tiles + micro list (the "Nutrition" title sits above,
   outside it). The padding also gives the tiles air from the top edge. The
   doubled class beats the generic ".frigoforia-card .wprm-internal-container"
   rule that zeroes vertical padding for the other sections' inner containers. */
.wprm-recipe-container .wprm-internal-container.wprm-internal-container-nutrition {
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 18px 20px;
}

/* Section header — smaller than the main sections (secondary), small berry icon */
.wprm-recipe-container .wprm-recipe-nutrition-header {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--ck-text);
	margin: 0 0 14px;
}
.wprm-recipe-container .wprm-recipe-nutrition-header::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background: center / contain no-repeat var(--ck-ico-nutrition);
}

/* Macro tiles (calories · protein · fat · sugar) — icon-led cards mirroring the
   prep/cook time meters (icon left, label above value, centred vertically via
   1fr spacer rows), one notch quieter (20px value). Icon color per macro. */
.frigoforia-nutrition-macros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 2px 0 20px;
}
.frigoforia-nutrition-macro {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: 11px;
	row-gap: 2px;
	align-items: center;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 12px 14px;
}
.frigoforia-nutrition-macro::before {
	content: "";
	grid-row: 1 / 5;
	grid-column: 1;
	align-self: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--ck-sand) center / 26px 26px no-repeat;
}
.frigoforia-nutrition-macro[data-macro="calories"]::before { background-image: var(--ck-ico-cal);     background-color: color-mix(in srgb, #E87438 12%, transparent); }
.frigoforia-nutrition-macro[data-macro="protein"]::before  { background-image: var(--ck-ico-protein); background-color: color-mix(in srgb, #C8573A 12%, transparent); }
.frigoforia-nutrition-macro[data-macro="fat"]::before      { background-image: var(--ck-ico-fat);     background-color: color-mix(in srgb, #E8B84A 12%, transparent); }
.frigoforia-nutrition-macro[data-macro="sugar"]::before    { background-image: var(--ck-ico-sugar);   background-color: color-mix(in srgb, #C2607F 12%, transparent); }
.frigoforia-nutrition-macro__label {
	grid-column: 2;
	grid-row: 2;
	font: 700 11px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.frigoforia-nutrition-macro__value {
	grid-column: 2;
	grid-row: 3;
	font: 600 20px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
}
.frigoforia-nutrition-macro__unit {
	font-size: 12px;
	font-weight: 500;
	color: var(--ck-text-muted);
}

/* Micro list → aligned two columns (single column on narrow screens) */
.wprm-recipe-container .wprm-nutrition-label-container-grouped {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
}
@media (max-width: 560px) {
	.wprm-recipe-container .wprm-nutrition-label-container-grouped {
		grid-template-columns: 1fr;
	}
}

.wprm-recipe-container .wprm-nutrition-label-text-nutrition-container {
	display: flex;
	align-items: baseline;
	padding: 7px 0;
	border-bottom: 1px solid var(--ck-border);
}
/* Drop the divider under the last row — the card border already closes it.
   The last row is 1 item (odd count → last-child) or 2 (even → the left item
   of the last row is :nth-last-child(2):nth-child(odd)). The 2-col rule is
   gated to the wide layout so the single-column (mobile) case only clears the
   very last item. */
.wprm-recipe-container .wprm-nutrition-label-text-nutrition-container:last-child {
	border-bottom: none;
}
@media (min-width: 561px) {
	.wprm-recipe-container .wprm-nutrition-label-text-nutrition-container:nth-last-child(2):nth-child(odd) {
		border-bottom: none;
	}
}
.wprm-recipe-container .wprm-nutrition-label-text-nutrition-label {
	margin-right: auto;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.wprm-recipe-container .wprm-nutrition-label-text-nutrition-value {
	font-size: 13px;
	font-weight: 600;
}
.wprm-recipe-container .wprm-nutrition-label-text-nutrition-unit {
	font-size: 12px;
	margin-left: 3px;
}

/* --- Notes → serif "Notes" title above a butter callout (design: recipe-detail).
   The icon + title sit outside; only the note body (.wprm-recipe-notes) is the
   gold-accented rounded box. --- */
.wprm-recipe-container .wprm-recipe-notes-container {
	margin: 28px 0 0;
}

.wprm-recipe-container .wprm-recipe-notes-header,
.wprm-recipe-container .wprm-recipe-notes-name {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--ck-text);
	margin: 0 0 8px;
}

.wprm-recipe-container .wprm-recipe-notes {
	font-family: var(--ck-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ck-ink);
	background: color-mix(in srgb, var(--ck-gold) 8%, transparent);
	border-left: 3px solid var(--ck-gold);
	border-radius: var(--ck-radius-sm);
	padding: 14px 18px;
}

/* ==========================================================================
   1a-bis. Recipe detail — "cozy cooking game" enhancement (design handoff)
   Big duotone icons on the time cards, section headers and jump nav. The WPRM
   card stays functional — we only restyle and inject icons via CSS (icons are
   data-URIs generated from RSE_Game_Icons so they match the submit flow).
   ========================================================================== */
.wprm-recipe-container,
.recipe-single {
	--rse-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ck-ico-prep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 30l16-16c3-3 7-3 7-1 0 1-1 2-3 4L14 33z' fill='%23C8573A' fill-opacity='0.16'/%3E%3Cpath d='M10 30l16-16c3-3 7-3 7-1 0 1-1 2-3 4L14 33z' fill='none' stroke='%23C8573A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 31l-3 7 7-3' fill='none' stroke='%23C8573A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 11l7 7' fill='none' stroke='%23C8573A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-cook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M9 24h30v6a8 8 0 01-8 8H17a8 8 0 01-8-8z' fill='%23E87438' fill-opacity='0.16'/%3E%3Cpath d='M9 24h30v6a8 8 0 01-8 8H17a8 8 0 01-8-8z' fill='none' stroke='%23E87438' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 24h34' fill='none' stroke='%23E87438' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 18c0-3-2-4-2-6s2-3 2-5M24 18c0-3-2-4-2-6s2-3 2-5M30 18c0-3-2-4-2-6s2-3 2-5' fill='none' stroke='%23E87438' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='25' r='15' fill='%238E4A6B' fill-opacity='0.16'/%3E%3Ccircle cx='24' cy='25' r='15' fill='none' stroke='%238E4A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 16v9l6 4' fill='none' stroke='%238E4A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 7h10' fill='none' stroke='%238E4A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-ingredients: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M20 16c-6 0-12 6-12 14 0 5 4 10 10 10 8 0 16-8 16-18 0-3-2-5-5-5-4 0-6 3-9 -1z' fill='%23C8573A' fill-opacity='0.16'/%3E%3Cpath d='M30 18c2-4 6-6 10-6 0 4-2 8-6 10' fill='%23C8573A' fill-opacity='0.16'/%3E%3Cpath d='M30 18c2-4 6-6 10-6 0 4-2 8-6 10' fill='none' stroke='%23C8573A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 22c-5 0-10 5-10 12 0 5 4 9 9 9 7 0 14-7 14-16 0-3-2-5-5-5-3 0-5 2-8 0z' fill='none' stroke='%23C8573A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 24c4 8 10 14 18 16' fill='none' stroke='%23C8573A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-method: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M14 22a10 10 0 0120 0z' fill='%235B7A4E' fill-opacity='0.16'/%3E%3Cpath d='M14 22a10 10 0 0120 0' fill='none' stroke='%235B7A4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22h24v4a3 3 0 01-3 3H15a3 3 0 01-3-3z' fill='%235B7A4E' fill-opacity='0.16'/%3E%3Cpath d='M12 22h24v4a3 3 0 01-3 3H15a3 3 0 01-3-3z' fill='none' stroke='%235B7A4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 29l1 9a2 2 0 002 2h8a2 2 0 002-2l1-9' fill='none' stroke='%235B7A4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 16v-3M24 16v-4M27 16v-3' fill='none' stroke='%235B7A4E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-equipment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='20' cy='26' r='12' fill='%234A7B9D' fill-opacity='0.16'/%3E%3Ccircle cx='20' cy='26' r='12' fill='none' stroke='%234A7B9D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='26' r='6' fill='none' stroke='%234A7B9D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31 22l10-4M31 26l10 0' fill='none' stroke='%234A7B9D' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='10' y='9' width='24' height='30' rx='3' fill='%23E8B84A' fill-opacity='0.16'/%3E%3Crect x='10' y='9' width='24' height='30' rx='3' fill='none' stroke='%23E8B84A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 17h12M16 23h12M16 29h8' fill='none' stroke='%23E8B84A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 31l7-7a2 2 0 013 3l-7 7-4 1 1-4z' fill='%23FAF6EF' stroke='%23E8B84A' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-nutrition: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 40C10 30 6 22 10 15c3-5 10-5 14 1 4-6 11-6 14-1 4 7 0 15-14 25z' fill='%23C2607F' fill-opacity='0.16'/%3E%3Cpath d='M24 40C10 30 6 22 10 15c3-5 10-5 14 1 4-6 11-6 14-1 4 7 0 15-14 25z' fill='none' stroke='%23C2607F' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M11 25h6l3-6 4 12 3-6h8' fill='none' stroke='%23C2607F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 7c1 7 9 9 9 18a9 9 0 11-18 0c0-4 2-7 4-9 0 3 2 5 3 4 2-2-1-6 2-13z' fill='%23E87438' fill-opacity='0.16'/%3E%3Cpath d='M24 7c1 7 9 9 9 18a9 9 0 11-18 0c0-4 2-7 4-9 0 3 2 5 3 4 2-2-1-6 2-13z' fill='none' stroke='%23E87438' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-protein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 8c7 0 12 12 12 20a12 12 0 01-24 0c0-8 5-20 12-20z' fill='%23C8573A' fill-opacity='0.16'/%3E%3Cpath d='M24 8c7 0 12 12 12 20a12 12 0 01-24 0c0-8 5-20 12-20z' fill='none' stroke='%23C8573A' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ck-ico-fat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 8c6 8 10 13 10 18a10 10 0 01-20 0c0-5 4-10 10-18z' fill='%23E8B84A' fill-opacity='0.16'/%3E%3Cpath d='M24 8c6 8 10 13 10 18a10 10 0 01-20 0c0-5 4-10 10-18z' fill='none' stroke='%23E8B84A' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M19 27a5 5 0 005 5' fill='none' stroke='%23E8B84A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	--ck-ico-sugar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='14' y='15' width='20' height='20' rx='4' fill='%23C2607F' fill-opacity='0.16'/%3E%3Crect x='14' y='15' width='20' height='20' rx='4' fill='none' stroke='%23C2607F' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M24 15v20M14 25h20' fill='none' stroke='%23C2607F' stroke-width='1.4' stroke-opacity='0.55'/%3E%3C/svg%3E");
}

/* --- Recipe single: hero overlay + header + actions --- */
.recipe-single { max-width: 1080px; margin: 0 auto; }
.recipe-single__hero {
	position: relative;
	border-radius: var(--ck-radius-lg);
	overflow: hidden;
	margin-bottom: 22px;
	/*box-shadow: var(--ck-shadow-photo);*/
}
.recipe-single__image {
	display: block;
	width: 100%;
	height: clamp(220px, 34vw, 340px);
	object-fit: cover;
}
.recipe-single__hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 26px;
	background: linear-gradient(180deg, rgba(42, 37, 32, 0) 42%, rgba(42, 37, 32, 0.62) 100%);
}
.recipe-single__title {
	font: 600 40px/1.05 var(--ck-font-heading);
	letter-spacing: -0.8px;
	color: var(--ck-text);
	margin: 0;
}
.recipe-single__hero-overlay .recipe-single__title { color: #fff; }
.recipe-single__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.recipe-single__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.recipe-single__header { margin-bottom: 18px; }
.recipe-single__header .recipe-single__badges,
.recipe-single__header .recipe-single__meta { margin: 10px 0 14px; }
.recipe-single__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.recipe-single__actions:empty { display: none; }
.recipe-single .post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	font: 600 13px var(--ck-font-body);
}
.recipe-single .post-navigation a { color: var(--ck-primary); text-decoration: none; }

/* --- Jump-to-section nav → game cards (WPRM already renders the icons) --- */
.wprm-recipe-container .wprm-recipe-jump-to-section-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
	gap: 10px;
	margin: 0 0 26px;
	overflow: visible;
	white-space: normal;
}
.wprm-recipe-container a.wprm-recipe-jump-to-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--ck-surface);
	border: 1.5px solid var(--ck-border);
	border-radius: 14px;
	padding: 12px 8px;
	text-decoration: none;
	color: var(--ck-text);
	font: 700 12.5px/1.2 var(--ck-font-body);
	text-align: center;
	transition: transform 0.2s var(--rse-spring), box-shadow 0.2s ease, border-color 0.2s ease;
}
.wprm-recipe-container .wprm-recipe-jump-to-section:hover {
	transform: translateY(-4px);
	border-color: var(--ck-primary);
	box-shadow: var(--ck-shadow-md);
}

.wprm-recipe-container .wprm-recipe-jump-to-section:focus,
.wprm-recipe-container .wprm-recipe-jump-to-section:active {
	background: rgba(200, 87, 58, 0.08);
}

.wprm-recipe-container .wprm-recipe-jump-to-section-icon { line-height: 0; color: var(--ck-primary); }
.wprm-recipe-container .wprm-recipe-jump-to-section-icon svg { width: 28px; height: 28px; }

/* --- Time meters → icon-led cards (Prep terracotta · Cook orange · Total plum) --- */
.wprm-recipe-details-container-table {
	padding:0px;
}


.wprm-recipe-container .wprm-recipe-times-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0px 0px 20px;
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-block-container-table {
	display: grid;
	grid-template-columns: 46px 1fr;
	/* 1fr spacers top + bottom so the label+value pair is centred vertically
	   as a group (the icon spans all rows), instead of label pinned to the top
	   and value to the bottom. */
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	background: var(--ck-surface);
	/* !important overrides WPRM's inline "border-width:0;border-style:dotted;
	   border-color:#666" (from table_borders_inside="0"); the shorthand resets
	   all three so the dotted grey doesn't leak through. */
	border: 1px solid var(--ck-border) !important;
	border-radius: var(--ck-radius-md);
	padding: 14px 16px;
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-block-container-table::before {
	content: "";
	grid-row: 1 / 5;
	grid-column: 1;
	align-self: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--ck-sand) center / 30px 30px no-repeat;
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-block-container-table:has(.wprm-recipe-prep_time)::before {
	background-image: var(--ck-ico-prep);
	background-color: color-mix(in srgb, var(--ck-primary) 12%, transparent);
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-block-container-table:has(.wprm-recipe-cook_time)::before {
	background-image: var(--ck-ico-cook);
	background-color: color-mix(in srgb, var(--ck-accent) 12%, transparent);
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-block-container-table:has(.wprm-recipe-total_time)::before {
	background-image: var(--ck-ico-clock);
	background-color: color-mix(in srgb, var(--ck-ai) 12%, transparent);
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-time-label {
	grid-column: 2;
	grid-row: 2;
	font: 700 11px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-time {
	grid-column: 2;
	grid-row: 3;
	display: block;
	border: none;
	background: none;
	border-radius: 0;
	padding: 0;
	font: 600 22px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
}
/* value span inside the time card — drop the inherited chip pill */
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-details {
	display: inline;
	border: none;
	background: none;
	border-radius: 0;
	padding: 0;
	font: 600 22px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
}
.wprm-recipe-container .wprm-recipe-times-container .wprm-recipe-details-unit {
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* --- In-card course / cuisine tag pills → clean sand pills (no overlap) --- */
.wprm-recipe-container .wprm-recipe-meta-container-pill {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.wprm-recipe-container .wprm-recipe-tag-container {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ck-border) !important;
	background: var(--ck-surface) !important;
	border-radius: var(--ck-radius-pill);
	padding: 6px 14px;
	font: 500 12.5px/1 var(--ck-font-body);
}
.wprm-recipe-container .wprm-recipe-tag-container .wprm-recipe-details-label {
	color: var(--ck-text-muted);
	font-weight: 600;
}
.wprm-recipe-container .wprm-recipe-tag-container .wprm-recipe-course,
.wprm-recipe-container .wprm-recipe-tag-container .wprm-recipe-cuisine {
	color: var(--ck-text);
	font-weight: 600;
}

.frigoforia-card .wprm-internal-container {
	padding: 0px 20px;
}

/* --- Section headers → big duotone icon prefix --- */
.wprm-recipe-container .wprm-recipe-ingredients-header,
.wprm-recipe-container .wprm-recipe-instructions-header,
.wprm-recipe-container .wprm-recipe-equipment-header,
.wprm-recipe-container .wprm-recipe-notes-header {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wprm-recipe-container .wprm-recipe-ingredients-header::before,
.wprm-recipe-container .wprm-recipe-instructions-header::before,
.wprm-recipe-container .wprm-recipe-equipment-header::before,
.wprm-recipe-container .wprm-recipe-notes-header::before {
	content: "";
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	background: center / contain no-repeat;
}
.wprm-recipe-container .wprm-recipe-ingredients-header::before { background-image: var(--ck-ico-ingredients); }
.wprm-recipe-container .wprm-recipe-instructions-header::before { background-image: var(--ck-ico-method); }
.wprm-recipe-container .wprm-recipe-equipment-header::before { background-image: var(--ck-ico-equipment); }
.wprm-recipe-container .wprm-recipe-notes-header::before { background-image: var(--ck-ico-notes); }

/* --- Numbered method steps → leaf token --- */
.wprm-recipe-container .wprm-recipe-instruction::before {
	background: color-mix(in srgb, var(--ck-leaf) 14%, transparent);
	color: var(--ck-leaf);
}

/* --- Servings scaler: "Servings  [1× 2× 3× ?]  N servings" row, assembled
   under the Ingredients title by recipe-servings.js. The pill buttons stay
   WPRM's (so scaling keeps working); we restyle them + the container. The
   !important beats WPRM's pill styling generated from the shortcode attrs. --- */
.frigoforia-servings {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px;
}
.frigoforia-servings__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-text-muted);
}
.frigoforia-servings .wprm-recipe-adjustable-servings-container {
	display: inline-flex;
	gap: 4px;
	background: var(--ck-sand);
	padding: 4px;
	border-radius: 999px;
}
.frigoforia-servings .wprm-recipe-adjustable-servings {
	border: none !important;
	background: transparent !important;
	color: var(--ck-text) !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	font: 700 13px/1 var(--ck-font-heading) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.frigoforia-servings .wprm-recipe-adjustable-servings.wprm-toggle-active {
	background: var(--ck-primary) !important;
	color: #fff !important;
}
.frigoforia-servings__count {
	font-size: 12px;
	color: var(--ck-text-muted);
	margin-left: auto;
}

/* --- Equipment → chips --- */
.wprm-recipe-container .wprm-recipe-equipment-container { margin: 24px 0; }
.wprm-recipe-container .wprm-recipe-equipment-header {
	font: 600 22px var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 14px;
}
.wprm-recipe-container .wprm-recipe-equipment {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.wprm-recipe-container .wprm-recipe-equipment-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 9px 14px;
	font: 500 13.5px var(--ck-font-body);
	color: var(--ck-ink);
}
.wprm-recipe-container .wprm-recipe-equipment-name::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-info);
}

@media (prefers-reduced-motion: reduce) {
	.wprm-recipe-container .wprm-recipe-jump-to-section { transition: none !important; }
	.wprm-recipe-container .wprm-recipe-jump-to-section:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   1b. WPRM Premium — Recipe Collections / Saved Collection (My cookbook)
   --------------------------------------------------------------------------
   The widget is a React app that hydrates into #wprm-recipe-collections-app
   (or .wprm-recipe-saved-collections-app). We can't easily restyle every
   internal class — it ships dynamic markup — but we can:
     - give the host container a card-like Frigoforia surface
     - re-skin the loading state, popup modals, and any links
     - let global Inter/terracotta tokens cascade in.
   -------------------------------------------------------------------------- */

#wprm-recipe-collections-app,
.wprm-recipe-saved-collections-app,
.wprm-shopping-list-app {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 20px;
	margin: 16px 0;
	box-shadow: var(--ck-shadow-card);
}

/* Ensure the widget's internal h1/h2/h3 inherit Frigoforia type */
#wprm-recipe-collections-app h1,
#wprm-recipe-collections-app h2,
#wprm-recipe-collections-app h3,
.wprm-recipe-saved-collections-app h1,
.wprm-recipe-saved-collections-app h2,
.wprm-recipe-saved-collections-app h3 {
	font-family: var(--ck-font-heading);
	color: var(--ck-text);
	letter-spacing: -0.3px;
}

/* Loading state — terracotta spinner instead of WPRM's default */
.wprm-collections-loader {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--ck-sand);
	border-top-color: var(--ck-primary);
	border-radius: 50%;
	animation: ck-collections-spin 0.8s linear infinite;
}
@keyframes ck-collections-spin {
	to { transform: rotate(360deg); }
}

/* Popup modal — WPRM's .wprm-popup-modal__* shell, shared by the rating dialog
   (PHP template) and the collection dialogs (React). Both are
   overlay > container > header + content (+ footer). The container is the
   card; header and footer run edge to edge inside it. These rules used to put
   the card on __content, which in the rating dialog is just the body — so the
   "Thank you" line looked like a text field floating under a separate header.
   Every selector starts at .wprm-popup-modal to outrank WPRM's single-class
   rules whatever order the stylesheets load in. */
.wprm-popup-modal .wprm-popup-modal__overlay {
	background: rgba(42, 37, 32, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 16px;
	box-sizing: border-box;
	/* Tapping the backdrop closes the dialog (theme.js). iOS Safari only
	   delivers that tap to a document-level listener when the element looks
	   clickable. */
	cursor: pointer;
}
.wprm-popup-modal .wprm-popup-modal__container {
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-lg);
	box-shadow: 0 24px 60px rgba(42, 37, 32, 0.25);
	color: var(--ck-text);
	padding: 0;
	cursor: auto;
}
.wprm-popup-modal .wprm-popup-modal__header {
	/* Sticky so the close button stays reachable when a long form scrolls. */
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 10px 10px 10px 22px;
	gap: 12px;
	background: var(--ck-text);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wprm-popup-modal .wprm-popup-modal__title {
	margin: 0;
	font: 600 20px/1.2 var(--ck-font-heading);
	color: #fff;
}
/* WPRM draws the X with `content: "\2715"` on ::before, coloured with
   var(--wprm-popup-title) — its modal_title_color setting, #000000 — which is
   black on our charcoal header. WPRM's rule is
   `.wprm-popup-modal__header .wprm-popup-modal__close:before`, so ours needs a
   third class to win. A single-class version shipped first, lost, and left the
   rating dialog with no visible way out (Annotatr #11, #12). */
.wprm-popup-modal .wprm-popup-modal__header .wprm-popup-modal__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.wprm-popup-modal .wprm-popup-modal__header .wprm-popup-modal__close::before {
	color: #fff;
	font-size: 18px;
	line-height: 1;
}
.wprm-popup-modal .wprm-popup-modal__header .wprm-popup-modal__close:hover,
.wprm-popup-modal .wprm-popup-modal__header .wprm-popup-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}
.wprm-popup-modal .wprm-popup-modal__content {
	padding: 18px 22px 22px;
	color: var(--ck-text);
}
.wprm-popup-modal .wprm-popup-modal__footer {
	margin: 0;
}
.wprm-popup-modal__footer {
	padding: 14px 22px;
	background: var(--ck-surface);
	border-top: 1px solid var(--ck-border);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.wprm-popup-modal__btn {
	padding: 9px 18px;
	border: 0;
	border-radius: var(--ck-radius-pill);
	background: var(--ck-primary);
	color: #fff;
	font: 600 13.5px/1 var(--ck-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wprm-popup-modal__btn:hover { background: var(--ck-primary-dark); }
.wprm-popup-modal__btn--secondary {
	background: transparent;
	color: var(--ck-text-muted);
	border: 1px solid var(--ck-border);
}
.wprm-popup-modal__btn--secondary:hover {
	background: var(--ck-sand);
	color: var(--ck-text);
}

/* --------------------------------------------------------------------------
   1c. WPRM Collections — runtime classes (.wprmprc-*) emitted by the React
       app inside #wprm-recipe-collections-app. These override the dynamic
       widget's row layout, thumbnails, drag handles, and inline actions.
   -------------------------------------------------------------------------- */

/* Container header — "Your Collections" title row with + / cart actions */
#wprm-recipe-collections-app .wprmprc-container-header,
.wprm-recipe-saved-collections-app .wprmprc-container-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ck-border);
}
.wprmprc-container-header > h1,
.wprmprc-container-header > h2,
.wprmprc-container-header > h3 {
	margin: 0;
	font: 600 18px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
}
.wprmprc-container-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wprmprc-container-header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--ck-border);
	border-radius: 8px;
	background: var(--ck-surface);
	color: var(--ck-text-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wprmprc-container-header-action:hover {
	background: var(--ck-sand);
	color: var(--ck-text);
	border-color: var(--ck-sand-deep);
}
.wprmprc-container-header-action svg { width: 16px; height: 16px; }

/* Each collection row: 28px drag | 40px thumb | name (1fr) | meta + actions */
.wprmprc-collection-item,
.wprmprc-collection-item-classic,
.wprmprc-overview-grid-collection {
	display: grid;
	grid-template-columns: 28px 40px 1fr auto;
	column-gap: 12px;
	align-items: center;
	padding: 10px 12px;
	margin: 4px 0;
	border: 1px solid var(--ck-border);
	border-radius: 10px;
	background: var(--ck-surface);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wprmprc-collection-item:hover,
.wprmprc-collection-item-classic:hover,
.wprmprc-overview-grid-collection:hover {
	border-color: var(--ck-sand-deep);
	background: var(--ck-bg);
}

/* Drag handle — subtle on rest, terracotta on hover */
.wprmprc-collection-item-action-order,
.wprmprc-overview-grid-collection-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	cursor: grab;
	color: var(--ck-text-light);
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wprmprc-collection-item-action-order:hover,
.wprmprc-overview-grid-collection-handle:hover {
	background: var(--ck-sand);
	color: var(--ck-primary);
}
.wprmprc-collection-item-action-order:active,
.wprmprc-overview-grid-collection-handle:active { cursor: grabbing; }
.wprmprc-collection-item-action-order svg,
.wprmprc-overview-grid-collection-handle svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.wprmprc-collection-item-action-order svg path,
.wprmprc-overview-grid-collection-handle svg path { fill: currentColor; }

/* Thumbnail — fixed 40×40, rounded, left of the name (NOT between name + count) */
.wprmprc-collection-item-image {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ck-sand);
	flex-shrink: 0;
}
.wprmprc-collection-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Reorder the inner cells via grid-area so image lands in column 2 even
   though the React markup emits it after the name */
.wprmprc-collection-item-classic > .wprmprc-collection-item-actions { grid-column: 1; }
.wprmprc-collection-item-classic > .wprmprc-collection-item-details {
	grid-column: 2 / span 2;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 12px;
	align-items: center;
	min-width: 0;
}
.wprmprc-collection-item-classic > .wprmprc-collection-item-details .wprmprc-collection-item-image {
	grid-column: 1;
	grid-row: 1;
}
.wprmprc-collection-item-classic > .wprmprc-collection-item-details .wprmprc-collection-item-name {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}
/* Items without a thumbnail: name spans both columns */
.wprmprc-collection-item-classic > .wprmprc-collection-item-details:not(:has(.wprmprc-collection-item-image)) .wprmprc-collection-item-name {
	grid-column: 1 / -1;
}

.wprmprc-collection-item-name {
	font: 500 14px/1.3 var(--ck-font-body);
	color: var(--ck-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wprmprc-collection-item-name strong {
	color: var(--ck-text);
	font-weight: 600;
}

/* Right side: count + cart + menu actions */
.wprmprc-collection-item-classic > .wprmprc-collection-item-servings {
	grid-column: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
}

.wprmprc-collection-item-action-add,
.wprmprc-collection-item-action-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ck-text-muted);
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wprmprc-collection-item-action-add:hover { background: var(--ck-sand); color: var(--ck-primary); }
.wprmprc-collection-item-action-delete:hover { background: var(--ck-sand); color: #b04124; }
.wprmprc-collection-item-action-add svg,
.wprmprc-collection-item-action-delete svg { width: 14px; height: 14px; fill: currentColor; }

/* Empty / editing input row — used when adding a new collection inline */
.wprmprc-collection-item input[type="text"],
.wprmprc-collection-item-classic input[type="text"] {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--ck-border);
	border-radius: 8px;
	background: var(--ck-surface);
	font: 400 13.5px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}
.wprmprc-collection-item input[type="text"]:focus,
.wprmprc-collection-item-classic input[type="text"]:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

/* "Add Collection" link at the bottom — promote to a real ghost button */
.wprmprc-action.wprmprc-overview-grid-collection-add,
.wprmprc-action.wprmprc-add-saved-collection-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 9px 16px;
	border: 1px dashed var(--ck-border);
	border-radius: var(--ck-radius-pill);
	background: transparent;
	color: var(--ck-text);
	font: 600 13px/1 var(--ck-font-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wprmprc-action.wprmprc-overview-grid-collection-add::before,
.wprmprc-action.wprmprc-add-saved-collection-action::before {
	content: "+";
	font-size: 14px;
	color: var(--ck-primary);
	font-weight: 700;
}
.wprmprc-action.wprmprc-overview-grid-collection-add:hover,
.wprmprc-action.wprmprc-add-saved-collection-action:hover {
	background: var(--ck-sand);
	border-color: var(--ck-sand-deep);
	border-style: solid;
	color: var(--ck-primary);
}


/* ==========================================================================
   2. recipe - button (recipe page)
   ========================================================================== */
.recipe-button {
	   display: inline-flex;
	   align-items: center;
	   gap: 8px;
	   padding: 11px 22px;
	   background: var(--ck-text);
	   color: #fff;
	   border: 1px solid var(--ck-text);
	   border-radius: var(--ck-radius-pill);
	   font-family: var(--ck-font-body);
	   font-weight: 600;
	   font-size: 13px;
	   line-height: 1.1;
	   cursor: pointer;
	   animation: none; /* kill any upstream pulse */
	   box-shadow: none;
	   transition: background-color 0.15s ease;
   }

/* ==========================================================================
   2. cookia-recipes-adapter — AI recipe adaptation
   ========================================================================== */

/* AI action buttons (Copy & adapt · Read recipe) — plum pills. These are WPRM
   template shortcodes that only appear on the recipe card. Consolidated here so
   there's a single source of truth (previously duplicated in the frigoforia
   template CSS). The compound selectors keep specificity high enough to win. */
.recipe-adapter-button,
.wprm-recipe-adapt-button.recipe-adapter-button,
.recipe-reader-button,
.wprm-recipe-read-button.recipe-reader-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 17px;
	background: var(--ck-ai);
	color: #fff;
	border: none;
	border-radius: var(--ck-radius-pill);
	font: 600 13px/1 var(--ck-font-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.recipe-adapter-button:hover,
.recipe-adapter-button:focus,
.recipe-reader-button:hover,
.recipe-reader-button:focus {
	background: var(--ck-ai-dark);
	color: #fff;
}

/* Keep the WPRM button containers inline within the action row. */
.wprm-recipe-adapt-button-container,
.wprm-recipe-read-button-container {
	display: inline-flex;
	margin: 0;
}

.recipe-adapter-button::before {
	content: "✨";
	font-size: 0.9em;
	line-height: 1;
}

.recipe-adapter-icon { display: none; } /* icon replaced by ::before sparkle */

/* Modal. The plugin renders
     .recipe-adapter-modal > .recipe-adapter-modal-overlay + .recipe-adapter-modal-content
   — the overlay is the dialog's sibling, not its parent. These rules once
   styled it as the parent: the empty overlay became a fixed, blurred layer at
   z-index 99999, while the dialog stayed in the page flow beneath it, at the
   bottom of the page, visible but unclickable (Annotatr #1). Now the fixed
   wrapper centres the dialog and the overlay only paints the backdrop.
   Two-class selectors outrank the plugin's frontend.css in any load order. */
.recipe-adapter-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	padding: 20px;
	overflow-y: auto;
	box-sizing: border-box;
}

.recipe-adapter-modal .recipe-adapter-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(42, 37, 32, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.recipe-adapter-modal .recipe-adapter-modal-content {
	position: relative; /* paints above the overlay, which comes first */
	margin: auto;       /* centred, yet scrolls from the top when taller than the screen */
	width: 100%;
	max-width: 640px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-lg);
	box-shadow: var(--ck-shadow-lg);
	overflow: hidden;
}

/* The plugin colours the title #1f2937 — invisible on the charcoal header. */
.recipe-adapter-modal .recipe-adapter-modal-header h2 {
	margin: 0;
	color: #fff;
	font: inherit;
}

.recipe-adapter-modal .recipe-adapter-modal-close {
	position: static; /* the plugin pins it absolutely; the flex header places it */
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	font-size: 24px;
}

/* Link to the new recipe, shown in the success message. */
.recipe-adapter-message .recipe-adapter-view-link {
	display: table;
	margin-top: 10px;
	padding: 9px 18px;
	border-radius: var(--ck-radius-pill);
	background: var(--ck-primary);
	color: #fff;
	font: 600 14px/1.1 var(--ck-font-body);
	text-decoration: none;
}

.recipe-adapter-message .recipe-adapter-view-link:hover,
.recipe-adapter-message .recipe-adapter-view-link:focus {
	background: var(--ck-primary-dark);
	color: #fff;
}

/* Progress while the AI works (20–60 s): spinner, text, indeterminate bar. */
.recipe-adapter-progress {
	margin-top: 14px;
	padding: 12px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
}

.recipe-adapter-spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 3px solid var(--ck-sand-deep);
	border-top-color: var(--ck-ai);
	border-radius: 50%;
	animation: ck-collections-spin 0.8s linear infinite;
}

.recipe-adapter-progress-text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.recipe-adapter-progress-title {
	font: 600 14.5px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}

.recipe-adapter-progress-detail {
	font-size: 13px;
	color: var(--ck-text-muted);
}

.recipe-adapter-progress-bar {
	position: relative;
	flex: 1 0 100%;
	height: 4px;
	border-radius: 999px;
	background: var(--ck-sand-deep);
	overflow: hidden;
}

.recipe-adapter-progress-bar span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 35%;
	border-radius: inherit;
	background: var(--ck-ai);
	animation: recipe-adapter-indeterminate 1.4s ease-in-out infinite;
}

@keyframes recipe-adapter-indeterminate {
	from { transform: translateX(-100%); }
	to   { transform: translateX(290%); }
}

@media (prefers-reduced-motion: reduce) {
	.recipe-adapter-spinner,
	.recipe-adapter-progress-bar span { animation-duration: 3s; }
}

.recipe-adapter-modal .recipe-adapter-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	background: var(--ck-text);
	color: #fff;
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 18px;
}

.recipe-adapter-modal-close {
	appearance: none;
	background: transparent;
	color: #fff;
	border: none;
	font-size: 20px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.recipe-adapter-modal-close:hover {
	background: rgba(255, 255, 255, 0.12);
}

.recipe-adapter-modal-body {
	padding: 22px;
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	font-size: 14.5px;
	line-height: 1.55;
}

.recipe-adapter-criteria {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14.5px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	resize: vertical;
	min-height: 120px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.recipe-adapter-criteria:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

.recipe-adapter-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 22px 18px;
	background: var(--ck-sand);
	border-top: 1px solid var(--ck-sand-deep);
}

.recipe-adapter-button-submit {
	background: var(--ck-primary);
	color: #fff;
	border: 1px solid var(--ck-primary);
	border-radius: var(--ck-radius-pill);
	padding: 10px 20px;
	font: 600 14px/1.1 var(--ck-font-body);
	cursor: pointer;
}

.recipe-adapter-button-submit:hover {
	background: var(--ck-primary-dark);
	border-color: var(--ck-primary-dark);
}

.recipe-adapter-button-cancel {
	background: transparent;
	color: var(--ck-text);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-pill);
	padding: 10px 18px;
	font: 500 14px/1.1 var(--ck-font-body);
	cursor: pointer;
}

.recipe-adapter-button-cancel:hover {
	background: var(--ck-sand-deep);
}

.recipe-adapter-message {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	font-size: 13.5px;
	color: var(--ck-text-muted);
}


/* ==========================================================================
   3. cookia-recipes-reader — voice TTS + conversational AI
   ========================================================================== */

/* "Read Recipe" icon — the duotone book/read glyph (from the game-icon set),
   drawn on ::before because the JS overwrites the .recipe-reader-icon span with
   state emojis. White to sit on the plum/dark button. */
.recipe-reader-button::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 48 48'%3E%3Cpath d='M24 14C19 9 12 9 8 11v22c4-2 11-2 16 3 5-5 12-5 16-3V11c-4-2-11-2-16 3z' fill='%23fff' opacity='0.16'/%3E%3Cpath d='M24 14C19 9 12 9 8 11v22c4-2 11-2 16 3 5-5 12-5 16-3V11c-4-2-11-2-16 3z' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 14v22' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37 6v6M34 9h6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.recipe-reader-icon { display: none; }

/* Conversation panel */
.recipe-reader-conversation-panel {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	box-shadow: var(--ck-shadow-card);
	padding: 20px;
	margin: 20px 0;
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.recipe-reader-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--ck-border);
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--ck-text);
}

.recipe-reader-status {
	font-size: 12.5px;
	color: var(--ck-text-muted);
	font-weight: 500;
}

.recipe-reader-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.recipe-reader-pause-button,
.recipe-reader-end-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--ck-radius-pill);
	font: 500 13px/1.1 var(--ck-font-body);
	cursor: pointer;
	border: 1px solid var(--ck-border);
	background: var(--ck-surface);
	color: var(--ck-text);
	transition: background-color 0.15s ease;
}

.recipe-reader-pause-button:hover {
	background: var(--ck-sand);
}

.recipe-reader-end-button {
	border-color: var(--ck-primary);
	color: var(--ck-primary);
}

.recipe-reader-end-button:hover {
	background: var(--ck-primary);
	color: #fff;
}

.recipe-reader-messages {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
	padding: 4px 4px 8px;
}

.recipe-reader-message {
	padding: 10px 14px;
	border-radius: var(--ck-radius-md);
	font: 400 14px/1.5 var(--ck-font-body);
	max-width: 82%;
}

.recipe-reader-message-assistant {
	background: var(--ck-sand);
	color: var(--ck-ink);
	border: 1px solid var(--ck-sand-deep);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.recipe-reader-message-user {
	background: var(--ck-text);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.recipe-reader-message-error {
	background: rgba(200, 61, 61, 0.08);
	color: var(--ck-error);
	border: 1px solid rgba(200, 61, 61, 0.25);
	align-self: stretch;
	font-size: 13px;
}

.recipe-reader-text {
	display: block;
}

.recipe-reader-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ck-border);
	border-top-color: var(--ck-primary);
	border-radius: 50%;
	animation: ck-reader-spin 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes ck-reader-spin {
	to { transform: rotate(360deg); }
}


/* ==========================================================================
   4. cookia-recipes-submit — AI-enhanced submission form
   ========================================================================== */

.rse-enhancer-wrapper {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	padding: 22px 24px;
	margin: 16px 0 24px;
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.rse-panel-description {
	color: var(--ck-text-muted);
	font-size: 13.5px;
	line-height: 1.55;
	margin-bottom: 12px;
}

.rse-field-group,
.rse-ing-group {
	margin-bottom: 16px;
}

.rse-field-group > label,
.rse-ing-group > label,
.rse-ing-group-header {
	display: block;
	font: 600 13px/1.3 var(--ck-font-body);
	color: var(--ck-text);
	margin-bottom: 6px;
}

.rse-input,
input.rse-input,
textarea.rse-input,
.rse-ing-amount,
.rse-ing-unit,
.rse-ing-name,
.rse-ing-notes,
.rse-tw-input,
.rse-ing-group-name {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rse-input:focus,
input.rse-input:focus,
textarea.rse-input:focus,
.rse-ing-amount:focus,
.rse-ing-unit:focus,
.rse-ing-name:focus,
.rse-ing-notes:focus,
.rse-tw-input:focus,
.rse-ing-group-name:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

/* Tabs */
.rse-tab {
	display: inline-block;
	padding: 8px 16px;
	margin-right: 6px;
	border: 1px solid var(--ck-border);
	border-bottom: none;
	border-radius: var(--ck-radius-sm) var(--ck-radius-sm) 0 0;
	background: var(--ck-sand);
	color: var(--ck-text-muted);
	font: 500 13px/1.1 var(--ck-font-body);
	cursor: pointer;
}

.rse-tab.active {
	background: var(--ck-surface);
	color: var(--ck-text);
	border-color: var(--ck-sand-deep);
	position: relative;
}

.rse-tab.active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--ck-primary);
}

/* Photo dropzone */
.rse-input-panel,
.rse-tab-content.rse-tab-from-photo {
	padding: 14px 0;
}

.rse-photo-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	border: 2px dashed var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	background: var(--ck-sand);
	color: var(--ck-text-muted);
	font-size: 13.5px;
	text-align: center;
	padding: 20px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
}

.rse-photo-preview:hover,
.rse-photo-preview.is-dragover {
	border-color: var(--ck-primary);
	background: rgba(200, 87, 58, 0.04);
	color: var(--ck-text);
}

.rse-photo-preview img {
	max-width: 100%;
	max-height: 280px;
	border-radius: var(--ck-radius-sm);
}

/* AI-assist action buttons (ghost + sparkle) */
.rse-action-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: transparent;
	color: var(--ck-text);
	border: 1px solid var(--ck-text);
	border-radius: var(--ck-radius-pill);
	font: 600 13.5px/1.1 var(--ck-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rse-action-button:hover {
	background: var(--ck-text);
	color: #fff;
}

.rse-action-button::before {
	content: "✨";
	font-size: 0.9em;
}

.rse-button-text { line-height: 1.1; }

/* Discover tab: advanced options + two-column field row */
.rse-advanced {
	margin: 4px 0 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-sand);
	padding: 0 12px;
}
.rse-advanced > summary {
	cursor: pointer;
	padding: 10px 0;
	font: 600 13.5px/1.2 var(--ck-font-body);
	color: var(--ck-text);
	list-style-position: inside;
}
.rse-advanced[open] > summary {
	border-bottom: 1px solid var(--ck-border);
	margin-bottom: 12px;
}
.rse-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.rse-field-row > .rse-field-group {
	flex: 1 1 180px;
}
select.rse-input {
	appearance: auto;
	-webkit-appearance: auto;
}

/* Discover mode toggle (one result vs refine) */
.rse-discover-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0;
}
.rse-mode-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13.5px/1.2 var(--ck-font-body);
	color: var(--ck-text);
	cursor: pointer;
}

/* Option picker (A2 concepts + A13 search candidates) */
.rse-options { margin-top: 16px; }
.rse-options-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.rse-option-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	background: var(--ck-surface);
	padding: 18px;
	transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.rse-option-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ck-shadow-lg);
	border-color: color-mix(in srgb, var(--ck-ai) 40%, var(--ck-border));
}
/* Discover concept cards: plum "Use this recipe" pill */
#rse-discover-options .rse-option-choose {
	background: var(--ck-surface);
	color: var(--ck-ai);
	border: 1.5px solid var(--ck-ai);
}
#rse-discover-options .rse-option-choose::before { content: none; }
#rse-discover-options .rse-option-choose:hover {
	background: color-mix(in srgb, var(--ck-ai) 10%, var(--ck-surface));
	color: var(--ck-ai-dark);
}
.rse-option-title {
	font: 600 15px/1.25 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 6px;
}
.rse-option-desc {
	font: 400 13px/1.45 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 0 0 8px;
}
.rse-option-ings {
	font: 400 12px/1.4 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 0 0 10px;
}
.rse-option-url {
	font-size: 12px;
	word-break: break-all;
	margin: 0 0 10px;
}
.rse-option-choose { margin-top: auto; align-self: flex-start; }

/* Refine area */
.rse-refine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}
.rse-refine-counter {
	flex-basis: 100%;
	font: 600 12.5px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-refine-input { flex: 1 1 220px; }
.rse-refine-note {
	flex-basis: 100%;
	font-size: 13px;
	color: var(--ck-text-muted);
}

/* Dictate tab */
.rse-dictate-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.rse-dictate-status {
	font: 500 13px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-dictate-btn.rse-dictating {
	background: var(--ck-primary);
	color: #fff;
	border-color: var(--ck-primary);
}

/* "Review before saving" notice shown atop the Standard form after an AI prefill */
.rse-review-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--ck-primary);
	border-left-width: 4px;
	border-radius: var(--ck-radius-sm);
	background: rgba(200, 87, 58, 0.06);
	color: var(--ck-text);
	font: 600 13.5px/1.4 var(--ck-font-body);
}

/* ============================================================
   Submit a Recipe — "cozy cooking game" redesign (design handoff)
   Spring easing for tactile lifts/pops:
   --rse-spring: cubic-bezier(.34, 1.56, .64, 1)
   ============================================================ */
.rse-enhancer-wrapper { --rse-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Intro */
.rse-enhancer-wrapper .rse-submit-intro { margin-bottom: 18px; }
.rse-enhancer-wrapper .rse-submit-title {
	font: 600 32px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
	letter-spacing: -0.5px;
	margin: 0 0 4px;
}
.rse-submit-lede {
	font: 400 14px/1.5 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 0;
}

/* "My cooking preferences" page (cookia-ingredients-preferences) */
.cip-wrap { max-width: 680px; }
.cip-title { font: 600 28px/1.2 var(--ck-font-heading); color: var(--ck-text); margin: 0 0 6px; }
.cip-lede { font: 400 14px/1.55 var(--ck-font-body); color: var(--ck-text-muted); margin: 0 0 22px; }
.cip-saved {
	background: color-mix(in srgb, var(--ck-leaf) 12%, transparent);
	border: 1px solid var(--ck-leaf);
	color: var(--ck-leaf);
	border-radius: var(--ck-radius-sm);
	padding: 11px 15px;
	font: 600 13.5px/1.4 var(--ck-font-body);
	margin-bottom: 18px;
}
.cip-form {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 24px;
}
.cip-label { display: block; font: 600 13px/1.2 var(--ck-font-body); color: var(--ck-text); margin-bottom: 8px; }
.cip-textarea {
	width: 100%;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 12px 14px;
	font: 400 14px/1.6 var(--ck-font-body);
	color: var(--ck-text);
	background: var(--ck-surface);
	resize: vertical;
}
.cip-textarea:focus { outline: none; border-color: var(--ck-primary); }
.cip-counter { text-align: right; font: 400 11.5px/1 var(--ck-font-body); color: var(--ck-text-light); margin: 6px 0 0; }

/* Liability notice — deliberately prominent, in the warning tone */
.cip-disclaimer {
	margin-top: 18px;
	background: color-mix(in srgb, var(--ck-gold) 10%, transparent);
	border-left: 3px solid var(--ck-gold);
	border-radius: var(--ck-radius-sm);
	padding: 14px 18px;
}
.cip-disclaimer-title { display: block; font: 700 13px/1.3 var(--ck-font-body); color: var(--ck-text); margin-bottom: 6px; }
.cip-disclaimer p { font: 400 12.5px/1.55 var(--ck-font-body); color: var(--ck-ink); margin: 0 0 8px; }
.cip-disclaimer p:last-child { margin-bottom: 0; }

.cip-actions { margin-top: 20px; }
.cip-save {
	background: var(--ck-primary);
	border: 1.5px solid var(--ck-primary);
	color: #fff;
	border-radius: 999px;
	padding: 11px 22px;
	font: 600 14px/1 var(--ck-font-body);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.cip-save:hover { background: var(--ck-primary-dark); border-color: var(--ck-primary-dark); transform: translateY(-2px); }

/* AI echo: "here's how I'll use your preferences", above the Discover questions */
.rse-understood {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	background: color-mix(in srgb, var(--ck-ai) 8%, transparent);
	border-left: 3px solid var(--ck-ai);
	border-radius: var(--ck-radius-sm);
	padding: 12px 15px;
	margin: 0 0 16px;
}
.rse-understood-badge {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ck-ai);
	position: relative;
}
.rse-understood-badge::before {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	line-height: 1;
}
.rse-understood-text {
	font: 400 13.5px/1.5 var(--ck-font-body);
	color: var(--ck-ink);
}
.rse-understood-edit {
	margin-left: auto;
	flex: 0 0 auto;
	font: 600 12px/1.5 var(--ck-font-body);
	color: var(--ck-ai);
	white-space: nowrap;
}

/* Server-confirmed "preferences were applied" badge on the generated recipe */
.rse-prefs-applied {
	display: flex;
	align-items: center;
	gap: 8px;
	background: color-mix(in srgb, var(--ck-leaf) 10%, transparent);
	border: 1px solid var(--ck-leaf);
	border-radius: var(--ck-radius-sm);
	padding: 9px 13px;
	margin: 0 0 14px;
	font: 500 12.5px/1.4 var(--ck-font-body);
	color: var(--ck-leaf);
}
.rse-prefs-applied::before {
	content: "\2713";
	font-weight: 700;
}

/* "Use my cooking preferences" opt-in — submit wizard + adapter modal */
.rse-prefs-optin,
.recipe-adapter-prefs {
	background: var(--ck-sand);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 11px 14px;
	margin: 0 0 22px;
}
.recipe-adapter-prefs { margin: 14px 0 0; }
.rse-prefs-label,
.recipe-adapter-prefs-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font: 600 13.5px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}
.rse-prefs-label input[type="checkbox"],
.recipe-adapter-prefs-label input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--ck-primary);
	cursor: pointer;
	margin: 0;
}
.rse-prefs-edit {
	margin-left: 10px;
	font: 400 12px/1 var(--ck-font-body);
	color: var(--ck-primary);
}
.rse-prefs-note,
.recipe-adapter-prefs-note {
	margin: 6px 0 0;
	font: 400 11.5px/1.45 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-prefs-hint {
	font: 400 13px/1.5 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 0 0 22px;
}

/* Post-submission confirmation screen (replaces the wizard once the recipe
   has been sent — see RSE_Form_Injector::render_confirmation) */
.rse-confirm {
	text-align: center;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 40px 28px;
	max-width: 560px;
	margin: 0 auto;
}
.rse-confirm-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ck-leaf) 14%, transparent);
	color: var(--ck-leaf);
	margin-bottom: 18px;
}
.rse-confirm-title {
	font: 600 26px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 10px;
}
.rse-confirm-text {
	font: 400 15px/1.6 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 0 auto 24px;
	max-width: 420px;
}
.rse-confirm-text strong { color: var(--ck-text); }
.rse-confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.rse-confirm-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1.5px solid var(--ck-border);
	background: var(--ck-surface);
	color: var(--ck-text);
	font: 600 14px/1 var(--ck-font-body);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.rse-confirm-btn:hover { border-color: var(--ck-primary); transform: translateY(-2px); text-decoration: none; }
.rse-confirm-btn-primary {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
}
.rse-confirm-btn-primary:hover { background: var(--ck-primary-dark); border-color: var(--ck-primary-dark); color: #fff; }
.rse-confirm-note {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--ck-border);
	font: 400 13px/1.5 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-confirm-note p { margin: 0; }

/* Two-step wizard: step indicator (Choose → Review) + step-2 provenance bar */
.rse-wizard-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
}
.rse-wizard-step {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: 0;
	padding: 4px 2px;
	cursor: pointer;
	color: var(--ck-text-muted);
	font: 500 13px/1 var(--ck-font-body);
}
.rse-wizard-step[disabled] { cursor: default; opacity: 0.55; }
.rse-wizard-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--ck-border);
	font: 700 13px/1 var(--ck-font-heading);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.rse-wizard-step.is-active { color: var(--ck-text); }
.rse-wizard-step.is-active .rse-wizard-step-num {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
}
.rse-wizard-step.is-done .rse-wizard-step-num {
	background: color-mix(in srgb, var(--ck-leaf) 14%, transparent);
	border-color: var(--ck-leaf);
	color: var(--ck-leaf);
}
.rse-wizard-sep {
	flex: 1 1 auto;
	height: 2px;
	max-width: 90px;
	border-radius: 2px;
	background: var(--ck-border);
}
.rse-enhancer-wrapper[data-step="2"] .rse-wizard-sep { background: var(--ck-leaf); }

/* Step 2 header: where this recipe came from + the way back */
.rse-source-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 10px 14px;
	margin-bottom: 18px;
}
.rse-back-to-sources,
.rse-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ck-surface);
	border: 1.5px solid var(--ck-border);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
	font: 600 13px/1 var(--ck-font-body);
	color: var(--ck-text);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.rse-back-to-sources:hover,
.rse-back-link:hover { border-color: var(--ck-primary); transform: translateX(-2px); }
.rse-source-label { font: 400 13px/1.3 var(--ck-font-body); color: var(--ck-text-muted); }
.rse-source-name { color: var(--ck-text); font-weight: 700; }

/* Game-mode cards (big duotone icon + label + description, per-mode hue) */
.rse-tab-bar.rse-tab-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 12px;
	border: 0;
	margin-bottom: 26px;
	background: none;
}
.rse-tab-cards .rse-tab {
	--rse-hue: var(--ck-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 16px 10px 14px;
	border: 2px solid var(--ck-border);
	border-radius: 18px;
	background: var(--ck-surface);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s var(--rse-spring), box-shadow 0.2s ease,
		border-color 0.2s ease, background-color 0.2s ease;
}
.rse-tab-cards .rse-tab:hover {
	transform: translateY(-6px) rotate(-1deg);
	border-color: var(--rse-hue);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--rse-hue) 28%, transparent);
}
.rse-tab-cards .rse-tab.active {
	border-color: var(--rse-hue);
	background: color-mix(in srgb, var(--rse-hue) 8%, var(--ck-surface));
	box-shadow: 0 10px 28px color-mix(in srgb, var(--rse-hue) 30%, transparent);
}
.rse-tab-cards .rse-tab:active { transform: translateY(-2px) scale(0.97); }
.rse-tab-cards .rse-tab.active::after { display: none; } /* drop the old underline */
.rse-tab-cards .rse-tab-icon { line-height: 0; transition: transform 0.2s var(--rse-spring); }
.rse-tab-cards .rse-tab:hover .rse-tab-icon { transform: scale(1.08) rotate(2deg); }
.rse-tab-cards .rse-tab-label { font: 600 15px/1.1 var(--ck-font-heading); color: var(--ck-text); }
.rse-tab-cards .rse-tab-desc  { font: 400 10.5px/1.25 var(--ck-font-body); color: var(--ck-text-muted); margin-top: 1px; }

/* "You already completed this path" badge — set on the source card once it has
   produced a recipe, so returning to step 1 shows where the answers live. */
.rse-tab-cards .rse-tab { position: relative; }
.rse-tab-cards .rse-tab-done { display: none; }
.rse-tab-cards .rse-tab.is-done .rse-tab-done {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ck-leaf);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}
.rse-tab-cards .rse-tab.is-done .rse-tab-done::before { content: "\2713"; }

/* Panels: discover + simple modes get a cozy sand card */
.rse-discover-panel.rse-input-panel,
.rse-mode-panel.rse-input-panel {
	background: var(--ck-sand);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-lg);
	padding: 24px 26px;
}

/* Section header (icon + serif title) inside the discover panel */
.rse-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rse-section-head h3 { margin: 0; }
.rse-section-icon { line-height: 0; }

/* Simple-mode hero (big tinted icon) */
.rse-mode-hero { display: flex; justify-content: center; margin-bottom: 12px; }
.rse-mode-hero-icon {
	display: inline-flex;
	padding: 14px;
	border-radius: var(--ck-radius-lg);
	background: color-mix(in srgb, var(--rse-hue) 14%, transparent);
}
.rse-mode-panel > h3 { text-align: center; }
.rse-mode-panel > .rse-panel-description {
	text-align: center;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* The Discover "quest" progress path (Describe → Refine → Pick → Review) */
.rse-quest { display: flex; align-items: flex-start; justify-content: center; margin: 0 0 22px; }
.rse-quest-node { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; }
.rse-quest-dot {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ck-sand-deep);
	color: var(--ck-text-muted);
	border: 2px solid var(--ck-border);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rse-quest-num { font: 700 16px/1 var(--ck-font-heading); }
.rse-quest-check { display: none; }
.rse-quest-label { font: 500 11px/1 var(--ck-font-body); color: var(--ck-text-muted); text-align: center; }
.rse-quest-node.is-active .rse-quest-dot {
	background: var(--ck-ai);
	color: #fff;
	border-color: var(--ck-ai);
	animation: rse-pop 0.32s var(--rse-spring);
}
.rse-quest-node.is-active .rse-quest-label { color: var(--ck-ai); font-weight: 700; }
.rse-quest-node.is-done .rse-quest-dot {
	background: color-mix(in srgb, var(--ck-ai) 14%, transparent);
	color: var(--ck-ai);
	border-color: var(--ck-ai);
}
.rse-quest-node.is-done .rse-quest-label { color: var(--ck-ai); }
.rse-quest-node.is-done .rse-quest-num { display: none; }
.rse-quest-node.is-done .rse-quest-check { display: block; }
.rse-quest-link {
	flex: 0 0 auto;
	width: 38px;
	height: 2px;
	margin-top: 19px;
	border-radius: 2px;
	background: var(--ck-border);
	transition: background-color 0.3s ease;
}
.rse-quest-link.is-done { background: var(--ck-ai); }

/* Discover: two big choice buttons (icon over label + hint) */
.rse-discover-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 0;
}
.rse-choice-btn {
	--rse-hue: var(--ck-primary);
	flex: 1 1 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 18px;
	text-align: center;
	background: var(--ck-surface);
	border: 2px solid var(--ck-border);
	border-radius: var(--ck-radius-lg);
	cursor: pointer;
	transition: transform 0.2s var(--rse-spring), box-shadow 0.2s ease, border-color 0.2s ease;
}
.rse-choice-btn:hover {
	transform: translateY(-4px);
	border-color: var(--rse-hue);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--rse-hue) 26%, transparent);
}
.rse-choice-btn:active { transform: translateY(-1px) scale(0.98); }
.rse-choice-btn[disabled] { opacity: 0.6; cursor: default; }
.rse-choice-icon { line-height: 0; }
.rse-choice-label { font: 600 18px/1.2 var(--ck-font-heading); color: var(--ck-text); }
.rse-choice-hint { font: 400 12px/1.3 var(--ck-font-body); color: var(--ck-text-muted); }
.rse-choice-btn.rse-loading .rse-choice-icon,
.rse-choice-btn.rse-loading .rse-choice-hint { display: none; }

/* Discover: narrowing questionnaire — poppy pills */
.rse-questions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 20px 0 0;
}
.rse-question-text { font: 700 14px/1.3 var(--ck-font-body); color: var(--ck-text); margin: 0 0 9px; }
.rse-question-options { display: flex; flex-wrap: wrap; gap: 9px; }
.rse-question-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-pill);
	background: var(--ck-surface);
	color: var(--ck-text);
	font: 600 13.5px/1.2 var(--ck-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rse-question-option:hover { border-color: var(--ck-primary); transform: translateY(-1px); }
.rse-question-option.selected {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
	animation: rse-pop 0.32s var(--rse-spring);
}
.rse-question-option.selected::before { content: "\2713"; font-weight: 700; margin-right: 1px; }

/* Discover: pill actions after answering (ghost + plum-filled) */
.rse-answered-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.rse-pill-btn {
	flex: 1 1 180px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 18px;
	border-radius: var(--ck-radius-pill);
	font: 700 14px/1 var(--ck-font-body);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease, color 0.15s ease;
}
.rse-pill-btn:active { transform: scale(0.97); }
.rse-pill-ghost { background: var(--ck-surface); border: 1.5px solid var(--ck-border); color: var(--ck-text); }
.rse-pill-ghost:hover { border-color: var(--ck-ai); color: var(--ck-ai-dark); }
.rse-pill-fill { background: var(--ck-ai); border: 1.5px solid var(--ck-ai); color: #fff; }
.rse-pill-fill:hover { background: var(--ck-ai-dark); box-shadow: 0 8px 20px color-mix(in srgb, var(--ck-ai) 35%, transparent); }
.rse-pill-spark { line-height: 0; display: inline-flex; }
.rse-pill-btn.rse-loading .rse-pill-spark { display: none; }

/* Reward burst on a successful generation */
.rse-celebrate { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; }
.rse-confetti {
	position: absolute;
	top: 22vh;
	opacity: 0;
	animation: rse-confetti-fall 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes rse-confetti-fall {
	0%   { opacity: 0; transform: translateY(-30px) scale(0.5) rotate(0deg); }
	12%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(62vh) rotate(420deg); }
}
@keyframes rse-pop {
	0%   { transform: scale(0.8); }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.rse-tab-cards .rse-tab,
	.rse-tab-cards .rse-tab-icon,
	.rse-choice-btn,
	.rse-option-card,
	.rse-quest-dot,
	.rse-question-option { transition: none !important; }
	.rse-tab-cards .rse-tab:hover,
	.rse-tab-cards .rse-tab:hover .rse-tab-icon,
	.rse-choice-btn:hover,
	.rse-option-card:hover { transform: none !important; }
	.rse-quest-node.is-active .rse-quest-dot,
	.rse-question-option.selected { animation: none !important; }
	.rse-celebrate { display: none !important; }
}

/* Section titles inside the enhancer */
.rse-enhancer-wrapper h2,
.rse-enhancer-wrapper h3,
.rse-enhancer-wrapper .rse-section-title {
	font-family: var(--ck-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--ck-text);
	margin: 0 0 12px;
}

/* Ingredient widget rows */
.rse-ing-widget {
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 12px;
	background: var(--ck-sand);
}

.rse-ing-col-headers {
	display: grid;
	grid-template-columns: 90px 100px 1fr 1fr 32px;
	gap: 8px;
	padding: 4px 4px 8px;
	color: var(--ck-text-muted);
	font: 600 11px/1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rse-ing-row,
.rse-ing-add-row {
	display: grid;
	grid-template-columns: 90px 100px 1fr 1fr 32px;
	gap: 8px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed var(--ck-border);
}

.rse-ing-row:last-child,
.rse-ing-add-row:last-child { border-bottom: none; }

/* "+ Add ingredient" is a button, so `display: grid` put its label in the
   first 90px column, where it wrapped. It is one link-like control, not a row. */
.rse-ing-add-row {
	display: block;
	text-align: left;
}

/* On a phone the five columns leave the ingredient and notes fields about
   40px each — unreadable, with the two header labels printed on top of one
   another. Quantity, unit and delete stay on one line; the ingredient and its
   notes get a line each, and the header labels go away (every field keeps its
   placeholder). */
@media (max-width: 600px) {
	.rse-ing-col-headers { display: none; }

	.rse-ing-row {
		grid-template-columns: 90px 1fr 32px;
		grid-template-areas:
			"qty   unit  del"
			"name  name  name"
			"notes notes notes";
		row-gap: 6px;
		padding: 10px 0;
	}
	.rse-ing-amount-wrap { grid-area: qty; }
	.rse-ing-unit-wrap   { grid-area: unit; }
	.rse-ing-name-wrap   { grid-area: name; }
	.rse-ing-notes-wrap  { grid-area: notes; }
	.rse-ing-row > .rse-ing-row-delete { grid-area: del; justify-self: end; }

	/* iOS Safari zooms the page in when a field with text under 16px is
	   focused. Everything fixed — the bottom tab bar — then drifts into the
	   middle of the screen, and the form no longer fits the width. 16px keeps
	   the page still. */
	.rse-input,
	input.rse-input,
	textarea.rse-input,
	.rse-ing-amount,
	.rse-ing-unit,
	.rse-ing-name,
	.rse-ing-notes,
	.rse-ing-group-name,
	.rse-tw-input {
		font-size: 16px;
	}
}

.rse-ing-row-delete,
.rse-ing-group-delete {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--ck-text-muted);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 4px;
	border-radius: var(--ck-radius-sm);
}

.rse-ing-row-delete:hover,
.rse-ing-group-delete:hover {
	color: var(--ck-error);
	background: rgba(200, 61, 61, 0.08);
}

.rse-ing-drop,
.rse-tw-dropdown {
	position: absolute;
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-sm);
	box-shadow: var(--ck-shadow-card);
	overflow: hidden;
	z-index: 10;
}

.rse-ing-drop-opt,
.rse-tw-option {
	padding: 8px 12px;
	font: 400 13.5px/1.3 var(--ck-font-body);
	color: var(--ck-text);
	cursor: pointer;
}

.rse-ing-drop-opt:hover,
.rse-tw-option:hover,
.rse-ing-drop-opt.is-active,
.rse-tw-option.is-active {
	background: var(--ck-sand);
}

.rse-ing-drop-opt-new,
.rse-tw-tag-new { color: var(--ck-primary); font-weight: 500; }

/* Tag widget (taxonomy) */
.rse-tw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.rse-tw-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-pill);
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text);
}

.rse-tw-tag-existing { background: var(--ck-sand); }
.rse-tw-tag-new      { background: rgba(200, 87, 58, 0.1); color: var(--ck-primary); border-color: rgba(200, 87, 58, 0.25); }

.rse-tw-remove {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
	font-size: 14px;
}

/* Status / spinner */
.rse-status-message {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: var(--ck-radius-sm);
	font-size: 13px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	color: var(--ck-text-muted);
}

.rse-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ck-border);
	border-top-color: var(--ck-primary);
	border-radius: 50%;
	animation: ck-reader-spin 0.8s linear infinite;
}

.rse-form-highlighted {
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.18);
	border-radius: var(--ck-radius-sm);
	transition: box-shadow 0.3s ease;
}


/* ==========================================================================
   5. cookia-recipes-translator — translation editor
   ========================================================================== */

.crt-editor {
	background: var(--ck-bg);
	padding: 24px;
	border-radius: var(--ck-radius-md);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.crt-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--ck-sand-deep);
}

.crt-editor__title {
	font: 600 28px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0;
}

.crt-editor__recipe-id {
	font-size: 12px;
	color: var(--ck-text-muted);
	letter-spacing: 0.4px;
}

.crt-editor__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--ck-radius-pill);
	background: transparent;
	color: var(--ck-text);
	border: 1px solid var(--ck-border);
	font: 500 13px/1.1 var(--ck-font-body);
	text-decoration: none;
	cursor: pointer;
}

.crt-editor__back:hover {
	background: var(--ck-sand);
}

/* Language switcher bar */
.crt-editor__lang-bar,
.nav-tab-wrapper.crt-lang-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	padding: 8px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-sm);
}

.crt-editor__lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--ck-radius-pill);
	background: transparent;
	color: var(--ck-text-muted);
	border: 1px solid transparent;
	font: 500 13px/1.1 var(--ck-font-body);
	cursor: pointer;
}

.crt-editor__lang-btn:hover { color: var(--ck-text); background: var(--ck-sand); }

.crt-editor__lang-btn--current {
	background: var(--ck-text);
	color: #fff;
	border-color: var(--ck-text);
}

.crt-editor__lang-btn--exists { color: var(--ck-leaf); }
.crt-editor__lang-btn--missing { color: var(--ck-primary); border-color: var(--ck-primary); }

/* Cards / sections */
.crt-editor__card,
.crt-editor__form-section,
.crt-editor__section {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	padding: 20px 22px;
	margin-bottom: 16px;
}

.crt-editor__card-header,
.crt-editor__section-title,
.crt-editor__group-title {
	font: 600 18px/1.25 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 12px;
}

.crt-editor__meta,
.crt-editor__meta-row,
.crt-editor__form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 12px;
}

.crt-editor__form-label {
	display: block;
	font: 600 12px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.crt-editor__form-input,
.crt-editor__form-number,
.crt-editor__form-textarea,
input.crt-editor__form-input,
textarea.crt-editor__form-textarea,
.crt-ing-amount,
.crt-ing-unit,
.crt-ing-name,
.crt-ing-notes,
.crt-instr-text,
.crt-group-name {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crt-editor__form-textarea,
textarea.crt-editor__form-textarea,
.crt-instr-text {
	min-height: 80px;
	resize: vertical;
}

.crt-editor__form-input:focus,
.crt-editor__form-number:focus,
.crt-editor__form-textarea:focus,
.crt-ing-amount:focus,
.crt-ing-unit:focus,
.crt-ing-name:focus,
.crt-ing-notes:focus,
.crt-instr-text:focus,
.crt-group-name:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

.crt-editor__form-row--times {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Ingredient / instruction rows */
.crt-ingredient-group,
.crt-instruction-group {
	margin-bottom: 16px;
}

.crt-ingredient-row {
	display: grid;
	grid-template-columns: 90px 100px 1fr 1fr 32px;
	gap: 8px;
	align-items: start;
	padding: 6px 0;
	border-bottom: 1px dashed var(--ck-border);
}

.crt-instruction-row {
	display: grid;
	grid-template-columns: 32px 1fr 32px;
	gap: 10px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px dashed var(--ck-border);
}

.crt-instr-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ck-sand);
	color: var(--ck-text);
	font: 600 14px/32px var(--ck-font-heading);
	text-align: center;
}

.crt-remove-ingredient,
.crt-remove-instruction {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--ck-text-muted);
	cursor: pointer;
	font-size: 16px;
	padding: 4px;
	border-radius: var(--ck-radius-sm);
}

.crt-remove-ingredient:hover,
.crt-remove-instruction:hover {
	color: var(--ck-error);
	background: rgba(200, 61, 61, 0.08);
}

.crt-add-ingredient,
.crt-add-instruction {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: transparent;
	color: var(--ck-text);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-pill);
	font: 500 13px/1.1 var(--ck-font-body);
	cursor: pointer;
}

.crt-add-ingredient:hover,
.crt-add-instruction:hover {
	background: var(--ck-sand);
}

/* Rating stars in editor */
.crt-editor__rating-stars { color: var(--ck-gold); font-size: 18px; letter-spacing: 2px; }

/* Tags */
.crt-editor__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.crt-editor__tag {
	display: inline-flex;
	padding: 5px 10px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-pill);
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text);
}

/* Status badges */
.crt-status--ok,
.crt-status-msg.crt-status--ok { color: var(--ck-leaf); font-weight: 600; }

.crt-status--missing,
.crt-status-msg.crt-status--missing { color: var(--ck-primary); font-weight: 600; }

.crt-notice--success {
	background: rgba(91, 122, 78, 0.08);
	color: var(--ck-leaf);
	border: 1px solid rgba(91, 122, 78, 0.25);
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font: 500 13px/1.4 var(--ck-font-body);
	margin-bottom: 14px;
}

/* Save-translation primary button */
.crt-editor__form-actions,
.crt-editor__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--ck-sand-deep);
	margin-top: 16px;
}

.crt-editor .button.button-primary,
.crt-translate-btn.button-primary {
	background: var(--ck-primary);
	color: #fff;
	border: 1px solid var(--ck-primary);
	border-radius: var(--ck-radius-pill);
	padding: 9px 18px;
	font: 600 13.5px/1.1 var(--ck-font-body);
	text-shadow: none;
	box-shadow: none;
}

.crt-editor .button.button-primary:hover,
.crt-translate-btn.button-primary:hover {
	background: var(--ck-primary-dark);
	border-color: var(--ck-primary-dark);
	color: #fff;
}

/* Translator metabox on recipe edit screen */
.crt-metabox {
	font-family: var(--ck-font-body);
	font-size: 13.5px;
	color: var(--ck-ink);
}

.crt-metabox__title {
	font: 600 14px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 8px;
}

.crt-metabox__flag { margin-right: 6px; }
.crt-metabox__status { font-size: 12px; color: var(--ck-text-muted); }


/* ==========================================================================
   6. cookia-ingredients-manager (WP admin)
   ========================================================================== */

.wim-admin-wrap,
.wrap .wim-admin-container {
	background: var(--ck-bg);
	border-radius: var(--ck-radius-md);
	padding: 20px;
}

/* Stat boxes */
.wim-stats,
.wim-admin-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 16px 0 22px;
}

.wim-stat-box {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 18px 20px;
	box-shadow: none;
}

.wim-stat-label {
	font: 600 11px/1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ck-text-muted);
}

.wim-stat-value {
	font: 600 26px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
	margin-top: 8px;
}

/* Admin tables */
.wim-products-table,
table.wim-products-table,
.widefat.wim-products-table {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	overflow: hidden;
	font-family: var(--ck-font-body);
}

.wim-products-table thead th,
.wim-admin-wrap .wp-list-table thead th {
	background: var(--ck-sand);
	color: var(--ck-text);
	font: 600 14px/1.2 var(--ck-font-heading);
	padding: 12px 14px;
	border-bottom: 1px solid var(--ck-sand-deep);
	text-align: left;
}

.wim-products-table tbody td,
.wim-admin-wrap .wp-list-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--ck-border);
	color: var(--ck-ink);
	font-size: 13.5px;
}

.wim-products-table tbody tr:hover td,
.wim-admin-wrap .wp-list-table tbody tr:hover td {
	background: var(--ck-sand);
}

/* Action chips (edit / search / view) */
.wim-admin-wrap .button.button-small,
.wim-actions-bar .button,
.button.wim-search-prices,
.button.wim-view-prices,
.button.wim-edit-product-result,
.button.wim-add-product-result {
	background: transparent;
	color: var(--ck-primary);
	border: 1px solid var(--ck-primary);
	border-radius: var(--ck-radius-pill);
	padding: 4px 12px;
	font: 500 12.5px/1.2 var(--ck-font-body);
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	height: auto;
}

.wim-admin-wrap .button.button-small:hover,
.button.wim-search-prices:hover,
.button.wim-view-prices:hover,
.button.wim-edit-product-result:hover,
.button.wim-add-product-result:hover {
	background: var(--ck-primary);
	color: #fff;
}

.button.wim-delete-ingredient,
.button-link.wim-delete-product-result {
	color: var(--ck-error);
	border-color: var(--ck-error);
}

.button.wim-delete-ingredient:hover {
	background: var(--ck-error);
	color: #fff;
}

/* Category / freshness / extraction badges */
.wim-category-badge,
.wim-freshness-badge,
.wim-extraction-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--ck-radius-pill);
	font: 500 11.5px/1.4 var(--ck-font-body);
	background: var(--ck-sand);
	color: var(--ck-text);
	border: 1px solid var(--ck-sand-deep);
}

.wim-freshness-fresh { color: var(--ck-leaf); border-color: rgba(91, 122, 78, 0.35); background: rgba(91, 122, 78, 0.1); }
.wim-badge-genai { background: rgba(142, 74, 107, 0.12); color: var(--ck-ai); border-color: rgba(142, 74, 107, 0.3); }

/* Modals (wim-modal) */
.wim-modal {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-lg);
	box-shadow: var(--ck-shadow-lg);
	overflow: hidden;
}

.wim-modal-close {
	background: transparent;
	border: none;
	color: var(--ck-text-muted);
	font-size: 22px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
}

.wim-modal-close:hover { background: var(--ck-sand); color: var(--ck-text); }

.wim-modal-body { padding: 20px; }

/* Notices */
.wim-messages,
.wim-equiv-messages { margin: 12px 0; }
.wim-info-message,
.wim-error-message,
.wim-error,
.wim-error-text {
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font-size: 13.5px;
	line-height: 1.45;
}

.wim-info-message { background: var(--ck-sand); border: 1px solid var(--ck-sand-deep); color: var(--ck-text); }
.wim-error-message,
.wim-error,
.wim-error-text { background: rgba(200, 61, 61, 0.08); border: 1px solid rgba(200, 61, 61, 0.25); color: var(--ck-error); }

.wim-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--ck-text-muted);
	font-size: 14px;
}

.wim-danger-zone {
	background: rgba(200, 61, 61, 0.05);
	border: 1px solid rgba(200, 61, 61, 0.25);
	border-radius: var(--ck-radius-md);
	padding: 16px 18px;
	margin-top: 24px;
}

.wim-danger-title {
	font: 600 15px/1.2 var(--ck-font-heading);
	color: var(--ck-error);
	margin: 0 0 6px;
}

.wim-danger-description { color: var(--ck-ink); font-size: 13.5px; }


/* ==========================================================================
   7. cookia-ingredients-inventory (frontend)
   ========================================================================== */

.iim-inventory-container {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.iim-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.iim-section-title {
	font: 600 22px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 12px;
}

/* Grid of ingredient tiles */
.iim-inventory-grid,
.iim-ingredient-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 16px 0;
}

.iim-ingredient-item,
.iim-item-row,
.iim-ingredient-checkbox-item {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	padding: 14px;
	box-shadow: var(--ck-shadow-card);
	/*display: grid;*/
	grid-template-columns: 46px 1fr;
	gap: 12px;
	align-items: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.iim-ingredient-item:hover,
.iim-item-row:hover {
	border-color: var(--ck-primary-light);
	box-shadow: var(--ck-shadow-lg);
}

/* 46×46 photo thumbnail — sand-deep fallback with first letter if no image */
.iim-image-preview,
.iim-ingredient-item .iim-photo,
.iim-item-row .iim-photo {
	width: 46px;
	height: 46px;
	border-radius: var(--ck-radius-sm);
	background-color: var(--ck-sand-deep);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-text);
	font: 600 18px/1 var(--ck-font-heading);
	text-transform: uppercase;
	flex-shrink: 0;
}

.iim-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.iim-ingredient-label,
.iim-col-ingredient,
.iim-ingredient-item__name {
	font: 600 13.5px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}

.iim-ingredient-quantity,
.iim-col-quantity,
.iim-col-location {
	font: 400 12.5px/1.3 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Expiry pills — colored by date class */
.iim-badge,
.iim-col-dates,
.iim-expiry,
[data-iim-expiry] {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--ck-radius-pill);
	font: 500 11.5px/1.4 var(--ck-font-body);
	background: var(--ck-sand);
	color: var(--ck-text);
	border: 1px solid var(--ck-sand-deep);
}

.iim-badge-danger,
.iim-admin-badge-danger,
.iim-expiry--urgent,
[data-iim-expiry="urgent"] {
	background: rgba(200, 87, 58, 0.1);
	color: var(--ck-primary);
	border-color: rgba(200, 87, 58, 0.35);
}

.iim-badge-warning,
.iim-admin-badge-warning,
.iim-expiry--soon,
[data-iim-expiry="soon"] {
	background: rgba(232, 184, 74, 0.18);
	color: #7a5f1a;
	border-color: rgba(232, 184, 74, 0.4);
}

.iim-expiry--fresh,
[data-iim-expiry="fresh"] {
	background: rgba(91, 122, 78, 0.12);
	color: var(--ck-leaf);
	border-color: rgba(91, 122, 78, 0.3);
}

/* Buttons */
.iim-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--ck-radius-pill);
	font: 600 13px/1.1 var(--ck-font-body);
	border: 1px solid var(--ck-text);
	background: transparent;
	color: var(--ck-text);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iim-button:hover { background: var(--ck-text); color: #fff; }

.iim-button-primary {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
}

.iim-button-primary:hover {
	background: var(--ck-primary-dark);
	border-color: var(--ck-primary-dark);
	color: #fff;
}

.iim-button-secondary {
	background: transparent;
	color: var(--ck-text);
	border-color: var(--ck-border);
}

.iim-button-secondary:hover { background: var(--ck-sand); }

.iim-button-large { padding: 11px 22px; font-size: 14px; }

/* Action icon buttons (edit/delete tile) */
.iim-action-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	color: var(--ck-text-muted);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
}

.iim-action-btn:hover { background: var(--ck-sand); color: var(--ck-text); }
.iim-delete-btn:hover { color: var(--ck-error); border-color: var(--ck-error); }

/* Inputs */
.iim-input,
.iim-select,
input.iim-input,
select.iim-select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.iim-input:focus,
.iim-select:focus,
input.iim-input:focus,
select.iim-select:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

/* Form groups */
.iim-form-group { margin-bottom: 12px; }
.iim-form-group-full { grid-column: 1 / -1; }
.iim-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}
.iim-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--ck-sand-deep);
	margin-top: 14px;
}

/* Empty state / messages */
.iim-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--ck-text-muted);
	background: var(--ck-sand);
	border: 1px dashed var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
}

.iim-message {
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font-size: 13.5px;
	margin-bottom: 10px;
}

.iim-message.iim-error {
	background: rgba(200, 61, 61, 0.08);
	color: var(--ck-error);
	border: 1px solid rgba(200, 61, 61, 0.25);
}

/* Recipe cards (from the recipe-search template) */
.iim-recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.iim-recipe-card {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
	box-shadow: var(--ck-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.iim-recipe-card-image,
.iim-recipe-image,
.iim-recipe-no-image {
	width: 100%;
	height: 160px;
	background-color: var(--ck-sand-deep);
	background-position: center;
	background-size: cover;
	display: block;
}

.iim-recipe-card-content { padding: 14px; }

.iim-recipe-title {
	font: 600 16px/1.25 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0 0 6px;
}

.iim-recipe-meta,
.iim-recipe-ingredient-count,
.iim-recipe-match-info {
	font: 400 12.5px/1.4 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* --------------------------------------------------------------------------
   7b. Pantry — Frigoforia layout (theme override of templates/default.php)
   -------------------------------------------------------------------------- */

.iim-pantry {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.iim-pantry__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.iim-pantry__body {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	align-items: start;
}

.iim-pantry__locations {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.iim-pantry__locations .micro-label { padding: 0 4px; }

.iim-locations-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.iim-location-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--ck-text);
	cursor: pointer;
	font: 500 13.5px/1 var(--ck-font-body);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.iim-location-item:hover { background: var(--ck-sand); }
.iim-location-item.is-active {
	background: var(--ck-sand);
	color: var(--ck-primary);
	font-weight: 600;
}
.iim-location-count {
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ck-sand);
}
.iim-location-item.is-active .iim-location-count { background: #fff; color: var(--ck-primary); }

.iim-pantry__expiring-card {
	padding: 18px 20px;
	border-radius: var(--ck-radius-lg);
	background: linear-gradient(135deg, var(--ck-primary) 0%, var(--ck-primary-dark) 100%);
	color: #fff;
}
.iim-pantry__expiring-card .micro-label {
	color: rgba(255, 255, 255, 0.78);
	display: block;
}
.iim-pantry__expiring-card p {
	margin: 8px 0 0;
	font: 400 14px/1.45 var(--ck-font-body);
	color: #fff;
}

/* Right column toolbar */
.iim-pantry__toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.iim-pantry__toolbar h3 {
	margin: 0;
	font: 600 22px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	flex: 0 0 auto;
}
.iim-pantry__toolbar .iim-search {
	flex: 1 1 200px;
	min-width: 0;
	padding: 8px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-pill);
	background: var(--ck-surface);
	font: 400 13.5px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}
.iim-pantry__toolbar .iim-search:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

.iim-pantry__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

/* Item card grid */
.iim-pantry__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.iim-pantry .iim-empty-state {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	color: var(--ck-text-muted);
	background: var(--ck-sand);
	border-radius: var(--ck-radius-md);
}

.iim-item-card {
	position: relative;
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	padding: 14px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: 14px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.iim-item-card:hover {
	border-color: var(--ck-sand-deep);
	box-shadow: var(--ck-shadow-card);
}
.iim-item-card__thumb {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--ck-sand-deep);
	background-size: cover;
	background-position: center;
}
.iim-item-card__thumb--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-text);
	font: 600 18px/1 var(--ck-font-heading);
	background: var(--ck-sand);
}
.iim-item-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.iim-item-card__name {
	margin: 0;
	font: 600 13.5px/1.3 var(--ck-font-body);
	color: var(--ck-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.iim-item-card__meta {
	margin: 0;
	font: 400 12px/1.4 var(--ck-font-body);
	color: var(--ck-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.iim-expiry {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font: 600 10px/1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-top: 4px;
}
.iim-expiry--urgent { background: rgba(200, 87, 58, 0.14); color: var(--ck-primary); }
.iim-expiry--soon   { background: rgba(232, 184, 74, 0.18); color: #7a5f1a; }
.iim-expiry--fresh  { background: rgba(91, 122, 78, 0.14); color: var(--ck-leaf); }

.iim-item-card__actions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.iim-item-card:hover .iim-item-card__actions,
.iim-item-card:focus-within .iim-item-card__actions { opacity: 1; }
.iim-pantry .iim-action-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--ck-border);
	border-radius: 8px;
	background: var(--ck-surface);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.iim-pantry .iim-action-btn:hover {
	background: var(--ck-sand);
	border-color: var(--ck-sand-deep);
}

/* Hide the legacy collapse toggle if any plugin update re-introduces it. */
.iim-pantry .iim-toggle-form { display: none; }

/* Location filter, chip filter, and the plugin's text-search compose:
   a card is visible only when none of the filters hide it. JS sets
   data-iim-hidden-loc / data-iim-hidden-chip; the plugin sets inline
   display:none. CSS attribute display:none beats nothing-set, and inline
   display:none beats CSS, so all three layers work together. */
.iim-pantry__grid .iim-item-card[data-iim-hidden-loc="1"],
.iim-pantry__grid .iim-item-card[data-iim-hidden-chip="1"],
.iim-pantry__grid .iim-item-card[data-iim-hidden-category="1"] { display: none; }

/* Keyboard focus ring on the location list items */
.iim-location-item:focus-visible {
	outline: 2px solid var(--ck-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7c. Add / Edit dialog (native <dialog>)
   -------------------------------------------------------------------------- */

dialog.iim-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--ck-radius-lg);
	background: var(--ck-bg);
	box-shadow: 0 24px 60px rgba(42, 37, 32, 0.25);
	color: var(--ck-text);
	overflow: hidden;
}
dialog.iim-dialog::backdrop {
	background: rgba(42, 37, 32, 0.45);
	backdrop-filter: blur(4px);
}

.iim-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background: var(--ck-text);
	color: #fff;
}
.iim-dialog__title {
	margin: 0;
	font: 600 22px/1.2 var(--ck-font-heading);
	color: #fff;
}
.iim-dialog__close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
}
.iim-dialog__close:hover { background: rgba(255, 255, 255, 0.12); }

.iim-dialog .iim-form {
	display: block;
	padding: 22px;
	max-height: calc(100vh - 32px - 64px);
	overflow-y: auto;
}
.iim-dialog .iim-form-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}
.iim-dialog .iim-form-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iim-dialog .iim-form-group-large { grid-column: span 2; }
.iim-dialog .iim-form-group-full  { grid-column: 1 / -1; }
.iim-dialog .iim-form-group label {
	font: 600 12px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.iim-dialog .iim-input {
	padding: 10px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	width: 100%;
	box-sizing: border-box;
}
.iim-dialog .iim-input:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}
.iim-dialog .iim-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--ck-border);
}
.iim-dialog .iim-button {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--ck-radius-pill);
	font: 600 13.5px/1 var(--ck-font-body);
	cursor: pointer;
}
.iim-dialog .iim-button-primary {
	background: var(--ck-primary);
	color: #fff;
}
.iim-dialog .iim-button-primary:hover { background: var(--ck-primary-dark); }
.iim-dialog .iim-button-secondary {
	background: transparent;
	color: var(--ck-text-muted);
	border: 1px solid var(--ck-border);
}
.iim-dialog .iim-button-secondary:hover {
	background: var(--ck-sand);
	color: var(--ck-text);
}

@media (max-width: 900px) {
	.iim-pantry__body { grid-template-columns: 1fr; }
	.iim-pantry__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.iim-pantry__stats { grid-template-columns: 1fr; }
	.iim-pantry__grid { grid-template-columns: 1fr; }
	.iim-dialog .iim-form-row { grid-template-columns: 1fr; }
	.iim-dialog .iim-form-group-large { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   7d. Recipe-search shortcode (theme override of recipe-search.php)
   -------------------------------------------------------------------------- */

.iim-recipe-search {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}
.iim-recipe-search__header { display: flex; flex-direction: column; gap: 4px; }
.iim-recipe-search__title {
	margin: 0;
	font: 600 26px/1.15 var(--ck-font-heading);
	color: var(--ck-text);
	letter-spacing: -0.4px;
}
.iim-recipe-search__sub {
	margin: 0;
	font: 400 14px/1.5 var(--ck-font-body);
	color: var(--ck-text-muted);
}

.iim-recipe-search__pick {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.iim-recipe-search__pick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.iim-recipe-search__pick-title {
	margin: 0;
	font: 600 18px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
}
.iim-recipe-search__pick-controls {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.iim-recipe-search__count {
	font: 500 12.5px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin-left: 4px;
}

.iim-recipe-search__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}
.iim-recipe-search__grid .iim-ingredient-checkbox-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-pill);
	font: 500 13px/1.2 var(--ck-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.iim-recipe-search__grid .iim-ingredient-checkbox-item:hover {
	background: var(--ck-sand);
}
.iim-recipe-search__grid .iim-ingredient-checkbox-item:has(input:checked) {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
	font-weight: 600;
}
.iim-recipe-search__grid .iim-ingredient-checkbox {
	width: 14px; height: 14px;
	accent-color: var(--ck-primary);
}
.iim-recipe-search__grid .iim-ingredient-checkbox-item:has(input:checked) .iim-ingredient-checkbox {
	accent-color: #fff;
}
.iim-recipe-search__grid .iim-ingredient-quantity {
	color: inherit;
	opacity: 0.75;
	font-weight: 400;
	margin-left: 4px;
}

.iim-recipe-search__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
	padding-top: 4px;
	border-top: 1px solid var(--ck-border);
	margin-top: 4px;
	padding-top: 16px;
}

.iim-recipe-search__results {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	padding: 20px;
}
.iim-recipe-search__results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.iim-recipe-search__results-title {
	margin: 0;
	font: 600 18px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
}
.iim-recipe-search__filters {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.iim-recipe-search__filter-label {
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.iim-recipe-search .iim-input {
	padding: 8px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 13px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}

.iim-recipe-search .iim-empty-state {
	padding: 32px 20px;
	text-align: center;
	color: var(--ck-text-muted);
	background: var(--ck-sand);
	border-radius: var(--ck-radius-md);
}


/* ==========================================================================
   8. cookia-shopping-list
   ========================================================================== */

.ras-enhanced-list-container,
.ras-expandable {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

.ras-expandable-header,
.ras-el-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-md) var(--ck-radius-md) 0 0;
	box-shadow: var(--ck-shadow-card);
}

.ras-expandable-title,
.ras-el-title {
	font: 600 18px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
	margin: 0;
}

.ras-el-content {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-top: none;
	border-radius: 0 0 var(--ck-radius-md) var(--ck-radius-md);
	padding: 16px 18px 18px;
	box-shadow: var(--ck-shadow-card);
}

/* Section list groupings */
.ras-el-table-wrapper {
	border-top: 1px solid var(--ck-border);
	margin-top: 10px;
}

.ras-el-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ras-el-table thead th,
.ras-el-th-ingredient,
.ras-el-th-needed,
.ras-el-th-product,
.ras-el-th-price,
.ras-el-th-in-inventory,
.ras-el-th-on-list,
.ras-el-th-to-buy,
.ras-el-th-recipes {
	text-align: left;
	font: 600 12px/1.1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ck-text-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--ck-sand-deep);
	background: var(--ck-sand);
}

.ras-el-table tbody td,
.ras-el-td-ingredient,
.ras-el-td-needed,
.ras-el-td-product,
.ras-el-td-price,
.ras-el-td-in-inventory,
.ras-el-td-on-list,
.ras-el-td-to-buy,
.ras-el-td-recipes {
	padding: 10px 12px;
	border-bottom: 1px dashed var(--ck-border);
	color: var(--ck-ink);
	vertical-align: middle;
}

.ras-el-td-price,
.ras-el-th-price {
	text-align: right;
	font-family: var(--ck-font-heading);
	font-weight: 500;
}

.ras-el-price-value {
	font: 500 14px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
}

.ras-el-price-unit,
.ras-el-price-from {
	font: 400 12px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
}

.ras-el-ingredient-name {
	font-weight: 500;
	color: var(--ck-text);
}

.ras-el-recipe-tag {
	display: inline-block;
	padding: 2px 8px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-pill);
	font: 500 11.5px/1 var(--ck-font-body);
	color: var(--ck-text);
	margin: 2px 4px 2px 0;
}

.ras-el-qty-covered { color: var(--ck-leaf); }
.ras-el-qty-none, .ras-el-qty-unknown { color: var(--ck-text-muted); }

.ras-el-inventory-expiring { color: #7a5f1a; }
.ras-el-inventory-expired { color: var(--ck-error); }

/* Leaf-fill checkbox for line items */
.ras-inventory-checkbox,
input.ras-inventory-checkbox[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--ck-leaf);
	border-radius: 5px;
	background: var(--ck-surface);
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	margin: 0;
}

.ras-inventory-checkbox:checked,
input.ras-inventory-checkbox[type="checkbox"]:checked {
	background: var(--ck-leaf);
	border-color: var(--ck-leaf);
}

.ras-inventory-checkbox:checked::after,
input.ras-inventory-checkbox[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") no-repeat center / 14px 14px;
}

/* Strike-through + fade for checked rows */
.ras-el-table tr.is-done .ras-el-ingredient-name,
.ras-el-table tr.ras-row-done td {
	text-decoration: line-through;
	opacity: 0.5;
}

/* Buttons */
.ras-el-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--ck-radius-pill);
	font: 600 13px/1.1 var(--ck-font-body);
	border: 1px solid var(--ck-border);
	background: var(--ck-surface);
	color: var(--ck-text);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ras-el-btn:hover { background: var(--ck-sand); }

.ras-el-btn-primary {
	background: var(--ck-primary);
	border-color: var(--ck-primary);
	color: #fff;
}

.ras-el-btn-primary:hover {
	background: var(--ck-primary-dark);
	border-color: var(--ck-primary-dark);
	color: #fff;
}

.ras-el-btn-secondary {
	background: var(--ck-text);
	color: #fff;
	border-color: var(--ck-text);
}

.ras-el-btn-secondary:hover {
	background: #1a1511;
	border-color: #1a1511;
}

.ras-el-btn-success {
	background: var(--ck-leaf);
	border-color: var(--ck-leaf);
	color: #fff;
}

.ras-el-btn-success:hover { background: #4c6742; border-color: #4c6742; }

/* Summary / total bar → stat-card row */
.ras-el-total-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	margin-top: 14px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	box-shadow: none;
}

.ras-el-total-label {
	font: 600 11px/1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ck-text-muted);
}

.ras-el-total-amount {
	font: 600 24px/1.1 var(--ck-font-heading);
	color: var(--ck-text);
}

.ras-el-total-items,
.ras-el-total-info {
	font: 500 12.5px/1.3 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Inputs + select */
.ras-el-input,
.ras-el-product-select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 13.5px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}

.ras-el-input:focus,
.ras-el-product-select:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

/* Form group */
.ras-el-form-group { margin-bottom: 12px; }

/* Modal */
.ras-el-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(42, 37, 32, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ras-el-modal {
	background: var(--ck-surface);
	border: 1px solid var(--ck-sand-deep);
	border-radius: var(--ck-radius-lg);
	box-shadow: var(--ck-shadow-lg);
	max-width: 560px;
	width: 100%;
	overflow: hidden;
}

.ras-el-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: var(--ck-text);
	color: #fff;
}

.ras-el-modal-title {
	font: 600 16px/1.2 var(--ck-font-heading);
	margin: 0;
}

.ras-el-modal-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--ck-radius-sm);
}

.ras-el-modal-close:hover { background: rgba(255,255,255,0.12); }

.ras-el-modal-body { padding: 18px 20px; }
.ras-el-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 20px 16px;
	background: var(--ck-sand);
	border-top: 1px solid var(--ck-sand-deep);
}

/* Indicator badges on collection cards */
.ras-indicators { display: inline-flex; gap: 6px; }
.ras-indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--ck-radius-pill);
	background: var(--ck-sand);
	border: 1px solid var(--ck-sand-deep);
	font: 500 11.5px/1 var(--ck-font-body);
	color: var(--ck-text);
}

.ras-indicator-icon { font-size: 11px; line-height: 1; }

/* Shopping list-wide helpers that don't follow the ras-el- prefix */
.shopping-list-container,
.shopping-list-section {
	margin: 16px 0;
}

.shopping-list-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--ck-text-muted);
	background: var(--ck-sand);
	border: 1px dashed var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
}

/* Empty + toast */
.ras-el-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--ck-text-muted);
	background: var(--ck-sand);
	border: 1px dashed var(--ck-sand-deep);
	border-radius: var(--ck-radius-md);
}

.ras-el-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px 18px;
	background: var(--ck-text);
	color: #fff;
	border-radius: var(--ck-radius-pill);
	font: 500 13.5px/1.1 var(--ck-font-body);
	box-shadow: var(--ck-shadow-lg);
	z-index: 100000;
}

.ras-el-spinner,
.ras-el-loading {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ck-border);
	border-top-color: var(--ck-primary);
	border-radius: 50%;
	animation: ck-reader-spin 0.8s linear infinite;
}

.ras-el-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(200, 61, 61, 0.08);
	border: 1px solid rgba(200, 61, 61, 0.25);
	border-radius: var(--ck-radius-sm);
	color: var(--ck-error);
	font-size: 13px;
}


/* ==========================================================================
   9. user-registration auth modal — plugin-emitted fields inside .auth-modal
   (The modal chrome itself — backdrop, tabs, close — is styled in main.css.
   These rules refine the user-registration form output sitting inside it.)
   ========================================================================== */

.auth-modal .ur-frontend-form .ur-form-row .ur-form-grid label {
	font: 600 13px/1.3 var(--ck-font-body);
	color: var(--ck-text);
	margin-bottom: 6px;
	display: block;
}

.auth-modal .ur-frontend-form .ur-form-row {
	margin-bottom: 14px;
}

.auth-modal .ur-frontend-form .ur-form-row .ur-form-grid input[type="text"],
.auth-modal .ur-frontend-form .ur-form-row .ur-form-grid input[type="email"],
.auth-modal .ur-frontend-form .ur-form-row .ur-form-grid input[type="password"],
.auth-modal .ur-frontend-form .ur-form-row .ur-form-grid input[type="tel"] {
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 10px 14px;
	font: 400 14.5px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	background: var(--ck-surface);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-modal .ur-frontend-form input:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}

/* Primary submit → terracotta pill.
   Uses !important to win over the earlier auth-modal rules in main.css
   which pin the submit to --ck-accent (brand orange); the Frigoforia
   primary action is --ck-primary (terracotta). */
.auth-modal .ur-frontend-form input[type="submit"],
.auth-modal .user-registration-page input[type="submit"],
.auth-modal .ur-submit-button,
.auth-modal input.ur-submit-button,
.landing-auth-button.btn--primary {
	background: var(--ck-primary) !important;
	color: #fff !important;
	border: 1px solid var(--ck-primary) !important;
	border-radius: var(--ck-radius-pill) !important;
	padding: 12px 22px !important;
	font: 600 14.5px/1.1 var(--ck-font-body) !important;
	cursor: pointer !important;
	width: 100% !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.auth-modal .ur-frontend-form input[type="submit"]:hover,
.auth-modal .user-registration-page input[type="submit"]:hover,
.auth-modal .ur-submit-button:hover,
.landing-auth-button.btn--primary:hover {
	background: var(--ck-primary-dark) !important;
	border-color: var(--ck-primary-dark) !important;
	color: #fff !important;
}

/* Tab active underline accent (refines the main.css rule) */
.auth-modal .auth-modal__tab--active {
	border-bottom: 2px solid var(--ck-primary);
}

/* Error messages → terracotta-on-sand */
.auth-modal .ur-error,
.auth-modal .user-registration-message.user-registration-error,
.auth-modal .ur-frontend-form .ur-error,
.auth-modal .ur-message.ur-error {
	background: rgba(200, 87, 58, 0.08);
	border: 1px solid rgba(200, 87, 58, 0.3);
	color: var(--ck-primary);
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font: 500 13px/1.4 var(--ck-font-body);
	margin: 8px 0;
}

/* Success message */
.auth-modal .user-registration-message.user-registration-message--success,
.auth-modal .ur-success-message {
	background: rgba(91, 122, 78, 0.08);
	border: 1px solid rgba(91, 122, 78, 0.3);
	color: var(--ck-leaf);
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font: 500 13px/1.4 var(--ck-font-body);
	margin: 8px 0;
}

/* "Forgot password?" / switcher links */
.auth-modal .ur-frontend-form a,
.auth-modal__panel a {
	color: var(--ck-primary);
	text-decoration: none;
	font-weight: 500;
}

.auth-modal .ur-frontend-form a:hover,
.auth-modal__panel a:hover { text-decoration: underline; }


/* ==========================================================================
   Preserved legacy rules
   (rules retained from the previous plugins.css that target outputs outside
   the new design brief, e.g. third-party pagination / print styles.)
   ========================================================================== */

/* WPRM print view — keep minimal neutral styles so print output is legible
   even when the re-skin container rules are overridden by WPRM's print CSS. */
@media print {
	.wprm-recipe-container {
		border: 1px solid #ccc;
		box-shadow: none;
		padding: 12px;
	}
	.wprm-recipe-container .wprm-recipe-name { font-size: 28px; }
	.recipe-adapter-button,
	.recipe-reader-button { display: none !important; }
}

/* ==========================================================================
   IIM Photo dialog
   ========================================================================== */

/* Visually hide an element while keeping it keyboard-focusable.
   Used for the file <input> behind the dropzone label. */
.iim-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Toolbar camera button — sibling to "+ Add ingredient". */
.iim-photo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
}
.iim-photo-btn svg { display: block; }

/* The photo dialog reuses .iim-dialog primitives but is wider. */
dialog.iim-photo-dialog {
	max-width: 600px;
	width: 90vw;
}

/* Dropzone — the <label> wrapping the file <input>. */
.iim-photo-dropzone {
	display: block;
	padding: 48px 24px;
	border: 2px dashed var(--ck-border, #e6e3df);
	border-radius: var(--ck-radius-md, 12px);
	text-align: center;
	cursor: pointer;
	background: var(--ck-bg, #f5f0e9);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.iim-photo-dropzone:hover,
.iim-photo-dropzone.is-drag {
	border-color: var(--ck-primary, #b04124);
	background: #fff;
}
.iim-photo-dropzone:focus-within {
	border-color: var(--ck-primary, #b04124);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(176, 65, 36, 0.18);
}
.iim-photo-dropzone__hint strong {
	display: block;
	font: 600 16px/1.3 var(--ck-font-heading, 'Fraunces', serif);
	color: var(--ck-text);
	margin-bottom: 4px;
}
.iim-photo-dropzone__hint span {
	font: 400 13px/1.4 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Analyzing phase — large preview + spinner text. */
.iim-photo-dialog__analyzing {
	text-align: center;
	padding: 32px 16px;
}
.iim-photo-dialog__preview {
	max-width: 100%;
	max-height: 240px;
	border-radius: var(--ck-radius-md);
	margin-bottom: 16px;
}
.iim-photo-dialog__preview--small {
	max-height: 80px;
	margin: 0;
}

/* Review phase summary — small preview + count. */
.iim-photo-dialog__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.iim-photo-dialog__count {
	margin: 0;
	font: 500 14px/1.3 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Row table. */
/* The microphone beside the written search, and what it answers.

   The field keeps its own × inside it; the microphone is a button of its own,
   large enough for a thumb. Before, the × was measured from the end of the
   whole row and so sat on top of the microphone: two controls in one smudge,
   neither of them obviously either. */
.crb-search { gap: 8px; }
.crb-search__field {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
}
/* The plugin gives the × `display: flex`, which outranks the hidden attribute. */
.crb-search__clear[hidden] { display: none; }

.crb-search__mic {
	appearance: none;
	flex: 0 0 auto;
	/* The smallest comfortable target on a phone. */
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	padding: 0;
	color: var(--ck-text-muted);
	cursor: pointer;
	border-radius: 999px;
	line-height: 0;
}
.crb-search__mic:hover { color: var(--ck-text); background: var(--ck-sand); }
.crb-search__mic.is-listening {
	color: #fff;
	background: var(--ck-primary);
	animation: ck-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ck-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(200, 87, 58, 0.45); }
	50%      { box-shadow: 0 0 0 7px rgba(200, 87, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.crb-search__mic.is-listening { animation: none; }
}

/* The head is one row of controls, and the spoken answer is not one of them:
   wedged in between the microphone and the recipe count it showed up as a
   small empty blister, there even with nothing to say — `display: flex` wins
   over the hidden attribute. It is a band of its own, under the row. */
.crb-results__head { flex-wrap: wrap; }
.crb-voice[hidden] { display: none; }
.crb-voice {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 10px 0 0;
	padding: 10px 14px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
}
.crb-voice .ck-mic-level { flex: 0 0 100%; }
.crb-voice__status { margin: 0; font: 600 14px/1.4 var(--ck-font-body); color: var(--ck-text); }
.crb-voice__heard { margin: 0; font: 400 13px/1.4 var(--ck-font-body); color: var(--ck-text-muted); font-style: italic; }
.crb-voice__clear {
	appearance: none;
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ck-primary);
	font: 600 13px/1.4 var(--ck-font-body);
	cursor: pointer;
}

/* Dictating the pantry: the hint, the level that proves the microphone is
   listening, and the place that covers the whole lot. */
.iim-photo-dialog__listening[hidden] { display: none; }
.iim-photo-dialog__listening {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 24px 8px;
	text-align: center;
}
.iim-dictate-hint {
	margin: 0;
	max-width: 420px;
	font: 400 14px/1.5 var(--ck-font-body);
	color: var(--ck-text-muted);
}
/* La preuve que le micro écoute. Elle existait au garde-manger seulement ;
   la dictée d'une recette et la recherche parlée n'offraient aucun retour, et
   « je ne sais pas s'il m'entend » se raconte comme un problème de
   sensibilité. */
.ck-mic-level[hidden] { display: none; }
.iim-dictate-level,
.ck-mic-level {
	width: 220px;
	height: 6px;
	border-radius: 999px;
	background: var(--ck-sand-deep, #e3d9c8);
	overflow: hidden;
}
.iim-dictate-level__bar,
.ck-mic-level__bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--ck-primary);
	transition: width 0.1s linear;
}
.iim-dictate-status {
	margin: 0;
	font: 600 14px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}

.iim-photo-dialog__place {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font: 600 13px/1.4 var(--ck-font-body);
	color: var(--ck-text);
}
.iim-photo-dialog__place input {
	flex: 1 1 180px;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font: 400 14px/1.4 var(--ck-font-body);
	background: var(--ck-surface);
}

/* A row the pantry or the catalogue already knows, against one that will
   create a new entry: the member decides what to correct from this alone. */
.iim-photo-dialog__rows tr.is-known .iim-photo-row-name {
	border-color: #5B7A4E;
	background: rgba(91, 122, 78, 0.06);
}
.iim-photo-dialog__rows tr.is-new .iim-photo-row-name {
	border-color: var(--ck-border);
	background: var(--ck-surface);
}
.iim-photo-dialog__rows tr.is-new .iim-photo-row-name::placeholder { color: var(--ck-text-muted); }

.iim-photo-dialog__rows {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}
.iim-photo-dialog__rows th {
	text-align: left;
	font: 600 11px/1 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--ck-text-muted);
	padding: 6px 8px;
}
.iim-photo-dialog__rows td {
	padding: 4px 8px;
	border-bottom: 1px dashed var(--ck-border);
}
.iim-photo-dialog__rows td:last-child { width: 36px; }
.iim-photo-dialog__rows input[type="text"],
.iim-photo-dialog__rows input[type="number"] {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--ck-border);
	border-radius: 6px;
	font: 400 13px/1.3 var(--ck-font-body);
	background: var(--ck-surface);
}
.iim-photo-dialog__rows input:focus {
	outline: 2px solid var(--ck-primary);
	outline-offset: 0;
	border-color: transparent;
}

.iim-photo-row-delete {
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--ck-text-muted);
	font-size: 16px;
	cursor: pointer;
	border-radius: 50%;
	line-height: 1;
}
.iim-photo-row-delete:hover {
	background: rgba(176, 65, 36, 0.08);
	color: var(--ck-primary, #b04124);
}

.iim-photo-dialog__note {
	margin: 0 0 8px;
	font: 400 12px/1.4 var(--ck-font-body);
	color: var(--ck-text-muted);
	font-style: italic;
}

/* Empty / error phases. */
.iim-photo-dialog__empty,
.iim-photo-dialog__error {
	text-align: center;
	padding: 32px 16px;
}
.iim-photo-dialog__error-msg {
	color: var(--ck-primary, #b04124);
	margin-bottom: 16px;
}

/* Toast — appended to <body> by JS. */
.iim-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 16px);
	background: var(--ck-text, #2a2520);
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	font: 500 13px/1.3 var(--ck-font-body);
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
	z-index: 100000;
}
.iim-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ==========================================================================
   IIM Categories list (left rail) + card category caption
   ========================================================================== */

/* Reuse the locations-list visual primitives. */
.iim-categories-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.iim-category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	font: 500 13px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}
.iim-category-item:hover { background: var(--ck-sand); }
.iim-category-item:focus-visible {
	outline: 2px solid var(--ck-primary);
	outline-offset: 2px;
}
.iim-category-item.is-active {
	background: var(--ck-primary, #b04124);
	color: #fff;
}
.iim-category-item.is-active .iim-location-count { background: #fff; color: var(--ck-primary); }

/* Card caption — small line under the ingredient name. */
.iim-item-card__category {
	display: block;
	font: 500 11px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
	margin: 2px 0 4px;
}
.iim-item-card__category:empty { display: none; }

/* Photo dialog row caption — small line under each row's name input. */
.iim-photo-row-category {
	display: block;
	margin-top: 2px;
	font: 500 11px/1.2 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Manual add dialog: category line under the autocomplete name input. */
.iim-add-dialog__category {
	margin: 4px 0 0;
	font: 500 12px/1.3 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* ---------------------------------------------------------------------------
   Inventory switcher — which store am I looking at, and who can see it.
   --------------------------------------------------------------------------- */

.iim-inventory-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	font-size: 14px;
}

.iim-inventory-bar select {
	/* Sized to its content, not the column: a full-width select reads as a
	   form field rather than a switcher. */
	max-width: 280px;
	padding: 7px 12px;
	border: 1px solid var(--ck-border, rgba(58, 51, 44, .18));
	border-radius: var(--ck-radius-sm, 12px);
	background: #fff;
	color: var(--ck-ink, #3A332C);
	font: inherit;
}

.iim-inventory-name {
	font-size: 15px;
	color: var(--ck-ink, #3A332C);
}

.iim-inventory-bar .iim-btn-link {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--ck-leaf, #5B7A4E);
	text-decoration: underline;
	font-size: 13px;
}

.iim-inventory-bar .iim-btn-link:hover {
	opacity: .8;
}

.iim-inventory-bar .iim-btn-link.iim-danger {
	color: var(--ck-primary, #C8573A);
}

.iim-shared-badge {
	font-size: 12px;
	color: var(--ck-text-muted, rgba(58, 51, 44, .65));
	border: 1px solid var(--ck-border, rgba(58, 51, 44, .18));
	border-radius: 999px;
	padding: 2px 10px;
}

/* ---------------------------------------------------------------------------
   Password rules — shown beside the field on registration and password reset,
   because the plugin only says "not strong enough" after the fact.
   --------------------------------------------------------------------------- */

.ck-pwpolicy {
	margin: 8px 0 4px;
	padding: 12px 14px;
	background: var(--ck-sand, #F6F1E7);
	border-radius: var(--ck-radius-sm, 12px);
	font-size: 13px;
	line-height: 1.5;
}

.ck-pwpolicy__title {
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--ck-ink, #3A332C);
}

.ck-pwpolicy__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ck-pwpolicy__rule {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--ck-text-muted, rgba(58, 51, 44, .7));
	transition: color 0.15s ease;
}

.ck-pwpolicy__mark {
	flex: 0 0 1em;
	text-align: center;
	font-weight: 700;
}

/* Met rules go green, so progress is visible while typing. */
.ck-pwpolicy__rule.is-met {
	color: var(--ck-leaf, #5B7A4E);
}

/* "Not a common word" cannot be verified in the browser, so it never ticks. */
.ck-pwpolicy__rule.is-advice {
	opacity: .8;
}

.ck-pwpolicy__verdict {
	margin: 8px 0 0;
	font-weight: 600;
}

.ck-pwpolicy__verdict.is-ok { color: var(--ck-leaf, #5B7A4E); }
.ck-pwpolicy__verdict.is-not-ok { color: var(--ck-primary, #C8573A); }

.ck-pwpolicy__tip {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--ck-text-muted, rgba(58, 51, 44, .7));
}

/* Average rating line above the recipe actions. */
.frigoforia-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.frigoforia-rating .wprm-recipe-rating-details {
	font-size: 13px;
	color: var(--ck-text-muted, rgba(58, 51, 44, .7));
}

/* ==========================================================================
   cookia-recipes-submit — tips, AI photo, nutrition, edit mode
   ========================================================================== */

/* The edit form's way back is a link, styled like the wizard's back button. */
.rse-back-link,
.rse-back-link:hover { text-decoration: none; color: var(--ck-text); }

/* The choice whose recipe is in the form (Discover suggestions, search matches) */
.rse-options-note {
	margin: 0 0 10px;
	font: 400 12.5px/1.45 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-option-card.is-current {
	border-color: var(--ck-ai);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-ai) 15%, transparent);
}
.rse-option-current {
	align-self: flex-start;
	margin: 0 0 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ck-ai);
	color: #fff;
	font: 700 11px/1.3 var(--ck-font-body);
}

/* AI photo, under WPRM's image field */
.rse-photo-tools { margin: 10px 0 18px; }
.rse-photo-current {
	position: relative;
	max-width: 420px;
	margin: 0 0 10px;
}
.rse-photo-current img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
}
.rse-photo-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(42, 37, 32, 0.72);
	color: #fff;
	font: 600 11.5px/1.3 var(--ck-font-body);
}
.rse-photo-actions,
.rse-nutrition-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.rse-photo-actions .rse-pill-btn,
.rse-nutrition-toolbar .rse-pill-btn {
	flex: 0 0 auto;
	padding: 10px 16px;
	font-size: 13px;
}
.rse-photo-hint,
.rse-nutrition-hint {
	flex: 1 1 220px;
	font: 400 12.5px/1.45 var(--ck-font-body);
	color: var(--ck-text-muted);
}
.rse-photo-tools .rse-status-message,
.rse-nutrition .rse-status-message { margin-top: 10px; }

/* Nutrition per serving (collapsible) */
.rse-nutrition {
	margin: 18px 0;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-md);
	background: var(--ck-sand);
}
.rse-nutrition > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	font: 600 15px/1.2 var(--ck-font-heading);
	color: var(--ck-text);
}
.rse-nutrition > summary::-webkit-details-marker { display: none; }
.rse-nutrition > summary::before {
	content: "\25B8";
	color: var(--ck-text-muted);
	transition: transform 0.15s ease;
}
.rse-nutrition[open] > summary::before { transform: rotate(90deg); }
.rse-nutrition-optional { font: 400 12px/1 var(--ck-font-body); color: var(--ck-text-muted); }
.rse-nutrition-badge {
	display: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ck-ai) 14%, transparent);
	color: var(--ck-ai-dark);
	font: 700 11px/1.3 var(--ck-font-body);
}
.rse-nutrition.is-estimated .rse-nutrition-badge { display: inline-block; }
.rse-nutrition-body {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ck-border);
}
.rse-nutrition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px 12px;
	margin-top: 14px;
}
.rse-nutrition-field label {
	display: block;
	margin-bottom: 4px;
	font: 600 12px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}
.rse-nutrition-input {
	position: relative;
	display: flex;
	align-items: center;
}
.rse-nutrition-input input {
	width: 100%;
	min-width: 0;
	padding: 8px 46px 8px 10px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-surface);
	font: 400 14px/1.3 var(--ck-font-body);
	color: var(--ck-text);
}
.rse-nutrition-input input:focus {
	outline: none;
	border-color: var(--ck-primary);
	box-shadow: 0 0 0 3px rgba(200, 87, 58, 0.12);
}
.rse-nutrition-unit {
	position: absolute;
	right: 10px;
	pointer-events: none;
	font: 500 12px/1 var(--ck-font-body);
	color: var(--ck-text-muted);
}

/* Edit form: the member's own name and e-mail only matter for a new submission */
.rse-mode-edit .wprmprs-layout-block-user_name,
.rse-mode-edit .wprmprs-layout-block-user_email { display: none; }
.rse-edit-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.rse-edit-cancel { font: 600 13.5px/1 var(--ck-font-body); color: var(--ck-text-muted); }
.rse-edit-cancel:hover { color: var(--ck-text); }

/* Published or draft, next to the recipe's name in the edit form's bar. */
.rse-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font: 600 11px/1.6 var(--ck-font-body);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.rse-status-badge--live {
	background: rgba(91, 122, 78, 0.14);
	color: #4a6640;
}
.rse-status-badge--draft {
	background: var(--ck-sand-deep, #e3d9c8);
	color: var(--ck-text-muted);
}
/* Published says it is out; this says to whom. */
.rse-status-badge--private {
	background: rgba(91, 122, 78, 0.14);
	color: #4a6640;
}

/* Who can see it: the last question before sending, asked in terms of people
   rather than of statuses. Two choices, each with what it actually means. */
.rse-visibility {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0;
	padding: 16px;
	background: var(--ck-sand);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
}
.rse-visibility__legend {
	font: 600 13px/1.4 var(--ck-font-body);
	color: var(--ck-text);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.rse-visibility__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
}
.rse-visibility__choice:has(input:checked) {
	border-color: var(--ck-primary);
	box-shadow: inset 0 0 0 1px var(--ck-primary);
}
.rse-visibility__choice input {
	/* Lines up with the first line of the title rather than the whole block. */
	margin: 3px 0 0;
	flex: 0 0 auto;
}
.rse-visibility__text { display: flex; flex-direction: column; gap: 2px; }
.rse-visibility__text strong { font: 600 14px/1.4 var(--ck-font-body); color: var(--ck-text); }
.rse-visibility__text em {
	font: 400 13px/1.45 var(--ck-font-body);
	font-style: normal;
	color: var(--ck-text-muted);
}

/* "Move to drafts": reversible, so it reads as an ordinary action. */
.rse-edit-unpublish {
	appearance: none;
	background: transparent;
	border: 1.5px solid var(--ck-border);
	border-radius: 999px;
	padding: 9px 18px;
	color: var(--ck-text);
	font: 600 13.5px/1 var(--ck-font-body);
	cursor: pointer;
}
.rse-edit-unpublish:hover { background: var(--ck-sand); }

/* "Publish recipe" on a draft — the adaptation waiting to be looked over. */
.rse-edit-publish {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 11px 22px;
	background: var(--ck-primary);
	color: #fff;
	font: 600 14px/1 var(--ck-font-body);
	cursor: pointer;
}
.rse-edit-publish:hover { background: var(--ck-primary-dark, #a8462e); }

/* The bin sits apart from the rest, and reads as the last resort it is. */
.rse-edit-delete {
	appearance: none;
	background: transparent;
	border: 0;
	margin-left: auto;
	padding: 11px 0;
	color: var(--ck-error, #c83d3d);
	font: 600 13.5px/1 var(--ck-font-body);
	cursor: pointer;
}
.rse-edit-delete:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.rse-edit-delete { margin-left: 0; }
}

/* Recipe card: nutrition that is an uncorrected AI estimate */
.rse-nutrition-estimated {
	margin: 8px 0 0;
	font: italic 400 12px/1.45 var(--ck-font-body);
	color: var(--ck-text-muted);
}