/* KnowThePepper design tokens: the single owner of palette, type, spacing,
   radius, shadow and the two layout widths. Loaded first in
   templates/layout/header.php. style.css, pepper-nav.css, readability.css and
   home.css only alias these values (e.g. --red: var(--ktp-chili)).
   Approved comps: art-src/style-refs/ktp-v2/. Plan: docs/plans/2026-11-12-ui-redesign-v2.md */

/* ── Fonts (self-hosted, OFL; variable files from Google Fonts / fontsource) ── */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback so the swap to Inter barely moves the layout. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

:root {
  /* ── Palette ("Chili & Ancho") ── */
  --ktp-white: #ffffff;
  /* Owner 2026-11-12: cream backgrounds read as AI-generated. Every section band is white
     (.band--smoke/.band--clay/.band--blush below); smoke/clay remain only as small neutral fills
     (hover, zebra rows, chart tracks, chips, image placeholders, quiet boxes). */
  --ktp-smoke: #f5f5f5;      /* neutral light fill */
  --ktp-clay: #ebebeb;       /* neutral deeper fill (chip hover, chart track) */
  --ktp-blush: #fdf0f0;      /* light chili tint for small accents (callouts, TOC current, mark); was peach #fcebe5 */
  --ktp-chili: #b91c1c;      /* primary button, hero word, active dot, heat data */
  --ktp-chili-dark: #991b1b; /* chili hover / pressed */
  --ktp-chili-40: rgba(185, 28, 28, .4); /* quiet prose-link underline */
  --ktp-ember: #d63a1e;      /* logo only */
  --ktp-ancho: #2a1410;      /* dark band, table head, active tab */
  --ktp-char: #160b08;       /* footer only, darker than ancho */
  --ktp-habanero: #ffb020;   /* dots, rules, highlighter on dark only */
  --ktp-ink: #1c1412;        /* text */
  --ktp-muted: #5e524d;      /* secondary text */
  --ktp-hairline: #e5e5e5;   /* 1.5px borders, neutral (was warm #e9e1dc) */
  --ktp-on-dark: #ffe9dc;    /* text on ancho / char */
  --ktp-on-dark-muted: #c9b5aa;
  --ktp-jalapeno: #3f7d3a;   /* stem / mild accent, small only */

  /* ── Heat tier ramp (fills; chips use a tint + ink text, never tier colour as small text) ── */
  --ktp-tier-mild: #22c55e;
  --ktp-tier-medium: #eab308;
  --ktp-tier-hot: #f97316;
  --ktp-tier-extra-hot: #ef4444;
  --ktp-tier-super-hot: #991b1b;
  /* Darker ink-safe variants and pale tints used by [data-tier] components */
  --ktp-tier-mild-ink: #16a34a;
  --ktp-tier-medium-ink: #ca8a04;
  --ktp-tier-hot-ink: #ea580c;
  --ktp-tier-extra-hot-ink: #c2410c;
  --ktp-tier-super-hot-ink: #991b1b;
  --ktp-tier-mild-tint: #f0fdf4;
  --ktp-tier-medium-tint: #fefce8;
  --ktp-tier-hot-tint: #fff7ed;
  --ktp-tier-extra-hot-tint: #fff7ed;
  --ktp-tier-super-hot-tint: #fef2f2;

  /* ── Type ── */
  --ktp-font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ktp-font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ktp-fw-display: 800;
  --ktp-fw-number: 700;
  --ktp-fs-body: 19px;
  --ktp-lh-body: 1.65;
  --ktp-fs-ui: 19px;
  --ktp-fs-small: 15px;
  --ktp-fs-h1: clamp(2.15rem, 4.8vw, 3.5rem);
  --ktp-fs-h2: clamp(1.6rem, 3vw, 2.25rem);
  --ktp-fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --ktp-fs-display: clamp(2.5rem, 6vw, 4.25rem);
  --ktp-tracking-display: -0.02em;

  /* ── Spacing scale ── */
  --ktp-space-1: 4px;
  --ktp-space-2: 8px;
  --ktp-space-3: 12px;
  --ktp-space-4: 16px;
  --ktp-space-5: 24px;
  --ktp-space-6: 32px;
  --ktp-space-7: 48px;
  --ktp-space-8: 64px;
  --ktp-space-9: 96px;
  --ktp-section-y-sm: clamp(32px, 4vw, 48px);
  --ktp-section-y: clamp(48px, 6vw, 80px);
  --ktp-section-y-lg: clamp(64px, 8vw, 112px);

  /* ── Shape, line, shadow ── */
  --ktp-radius: 12px;        /* cards, panels, inputs */
  --ktp-radius-sm: 8px;      /* chips, small buttons */
  --ktp-line: 1.5px solid var(--ktp-hairline);
  --ktp-shadow: 0 10px 30px -14px rgba(42, 20, 16, .22);

  /* ── Layout: two widths only ── */
  --ktp-w-wide: 1200px;      /* header, footer, card grids, charts, tables, editorial images */
  --ktp-w-read: 720px;       /* prose, TOC, FAQ, search fields, forms, legal body, callouts */
  --ktp-gutter: 24px;
  --ktp-header-h: 68px;
}

@media (max-width: 480px) {
  :root {
    --ktp-gutter: 16px;
    --ktp-header-h: 60px;
  }
}

/* ── Band layer ──
   A band is a full-bleed section. Each surface sets its own text, link and line
   colours; content sits inside .wrap-wide (1200) or .wrap-read (720). Joins between
   bands are a plain colour change, a ≤12px curve (.seam--curve) or a heat-strip rule
   (.rule-heat); patterns are opt-in per band (.band--pat-*, see the pattern layer below).
   Rules: neighbours never share a surface; at most one chili and two ancho bands per
   page; the last ancho band never touches the char footer. */
.wrap-wide,
.wrap-read {
  width: min(100% - 2 * var(--ktp-gutter), var(--ktp-w-wide));
  margin-inline: auto;
}
.wrap-read { width: min(100% - 2 * var(--ktp-gutter), var(--ktp-w-read)); }

.band {
  --band-bg: var(--ktp-white);
  --band-ink: var(--ktp-ink);
  --band-muted: var(--ktp-muted);
  --band-line: var(--ktp-hairline);
  --band-link-line: var(--ktp-chili-40);
  --band-link-hover: var(--ktp-chili);
  --pat-ink: #f4f4f4; /* pattern line colour, 1.10:1 against the band; per surface below */
  background: var(--band-bg);
  color: var(--band-ink);
  padding-block: var(--ktp-section-y);
}
.band--sm { padding-block: var(--ktp-section-y-sm); }
.band--lg { padding-block: var(--ktp-section-y-lg); }
.band--flush { padding-block: 0; }

.band--white { --band-bg: var(--ktp-white); --pat-ink: #f4f4f4; }   /* 1.100:1 */
.band--smoke { --band-bg: var(--ktp-white); --pat-ink: #f4f4f4; }   /* white since 2026-11-12 (owner: no cream) */
.band--clay  { --band-bg: var(--ktp-white); --pat-ink: #f4f4f4; }   /* white since 2026-11-12 (owner: no cream) */
.band--blush { --band-bg: var(--ktp-white); --pat-ink: #f4f4f4; }   /* white since 2026-11-12 (owner: no cream/peach bands) */
.band--ancho {
  --band-bg: var(--ktp-ancho);
  --band-ink: var(--ktp-on-dark);
  --band-muted: var(--ktp-on-dark-muted);
  --band-line: rgba(255, 233, 220, .18);
  --band-link-line: rgba(255, 233, 220, .45);
  --band-link-hover: var(--ktp-white);
  --pat-ink: #361c17;                 /* slightly lighter than the band, 1.107:1 */
}

.band :where(h1, h2, h3, h4) { color: var(--band-ink); }
.band :where(.band-muted, .lead) { color: var(--band-muted); }

/* Quiet prose links: ink text, 1.5px chili underline at ~40%, solid on hover.
   Navigation lists (nav, TOC, footer, card titles) carry classes and are excluded. */
.band :where(p, li, dd, figcaption) a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--band-link-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.band :where(p, li, dd, figcaption) a:not([class]):hover {
  text-decoration-color: var(--band-link-hover);
}

/* ── Pattern layer ──
   One quiet line pattern per band, painted by a ::before filled with --pat-ink and cut by a
   mask tile (public/assets/images/patterns/): slice = pepper cross-sections, grid = log graph
   paper (one decade per tile), ristra = hanging dried chilies, calyx = stem caps. The line is
   ~1.10:1 against its own band, so it is texture, not content. .band--pat-margins fades the
   pattern out over the centre column (--pat-clear wide, --pat-fade soft edge) so text never
   sits on it; on viewports narrower than the clear column nothing is drawn.
   Not for prose or forms. Hidden for prefers-contrast: more, forced colours and print. */
.band[class*="band--pat-"] { position: relative; isolation: isolate; }
.band[class*="band--pat-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pat-ink);
  -webkit-mask-image: var(--pat-img);
  mask-image: var(--pat-img);
  -webkit-mask-size: var(--pat-size) var(--pat-size);
  mask-size: var(--pat-size) var(--pat-size);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.band--pat-slice  { --pat-img: url(/assets/images/patterns/pattern-slice.png);  --pat-size: 480px; }
.band--pat-ristra { --pat-img: url(/assets/images/patterns/pattern-ristra.png); --pat-size: 480px; }
.band--pat-calyx  { --pat-img: url(/assets/images/patterns/pattern-calyx.png);  --pat-size: 420px; }
.band--pat-grid   { --pat-img: url(/assets/images/patterns/scoville-log-grid.webp); --pat-size: 160px; }

.band--pat-margins { --pat-clear: 1000px; --pat-fade: 120px; }
.band.band--pat-margins::before {
  --pat-side: linear-gradient(to right,
    #000 calc(50% - var(--pat-clear) / 2 - var(--pat-fade)),
    transparent calc(50% - var(--pat-clear) / 2),
    transparent calc(50% + var(--pat-clear) / 2),
    #000 calc(50% + var(--pat-clear) / 2 + var(--pat-fade)));
  -webkit-mask-image: var(--pat-img), var(--pat-side);
  mask-image: var(--pat-img), var(--pat-side);
  -webkit-mask-size: var(--pat-size) var(--pat-size), 100% 100%;
  mask-size: var(--pat-size) var(--pat-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (prefers-contrast: more), (forced-colors: active), print {
  .band[class*="band--pat-"]::before { display: none; }
}

/* ── Divider layer (calm joins only: no drips, flames, fringes or ornaments) ──
   .seam--curve: the band rises into the one above it with a broad two-crest wave (40px,
   20px on phones), drawn by a mask on a ::after filled with the band's own colour (no clip-path, no
   change to the band's content box). The previous band keeps >= 48px of bottom padding.
   .rule-heat: first child of a band; a 1px hairline across the wide column on the band's
   top edge with a centred 240x6 five-segment heat strip set in a gap of the band colour. The article rule lives in article.css. */
.seam--curve { position: relative; isolation: isolate; }
.seam--curve::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 40px;
  background: var(--band-bg);
  pointer-events: none;
  -webkit-mask: url(/assets/images/patterns/section-wave-divider.webp) 0 0 / 100% 100% no-repeat;
  mask: url(/assets/images/patterns/section-wave-divider.webp) 0 0 / 100% 100% no-repeat;
}
/* Owner 2026-11-12 ("divider đâu?"): a 12px arc read as a straight cut, so the join is a
   broad two-crest wave, 40px on desktop and 20px on phones; .seam--curve-flip mirrors it so
   neighbouring joins differ. */
.seam--curve-flip::after { transform: scaleX(-1); }
@media (max-width: 640px) { .seam--curve::after { height: 20px; } }

.band:has(> .rule-heat) { position: relative; }
.rule-heat {
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 1;
  width: min(100% - 2 * var(--ktp-gutter), var(--ktp-w-wide));
  height: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}
.rule-heat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 1px;
  background: rgba(28, 20, 18, .22);
}
.rule-heat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 240px;
  height: 6px;
  margin-left: -120px;
  border-radius: 3px;
  box-shadow: 0 0 0 10px var(--band-bg, #fff);
  background: linear-gradient(to right,
    var(--ktp-tier-mild) 0 20%,
    var(--ktp-tier-medium) 20% 40%,
    var(--ktp-tier-hot) 40% 60%,
    var(--ktp-tier-extra-hot) 60% 80%,
    var(--ktp-tier-super-hot) 80% 100%);
}

/* ── v2 type base (redesigned pages only: <body class="ktp-v2">) ──
   readability.css forces these on legacy pages with !important. Redesigned pages get the same
   values here with the same selector specificity but without !important, so a page rule of higher
   specificity overrides them. The mobile sizes mirror the readability.css 768px block. */
:where(body.ktp-v2) main h1 {
  font-family: var(--ktp-font-display);
  font-size: var(--ktp-fs-h1);
  line-height: 1.08;
  letter-spacing: var(--ktp-tracking-display);
  text-wrap: balance;
}
:where(body.ktp-v2) main h2,
:where(body.ktp-v2) main .pepper-section-h2 {
  font-family: var(--ktp-font-display);
  font-size: var(--ktp-fs-h2);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 800;
  text-wrap: balance;
}
:where(body.ktp-v2) main h3 {
  font-family: var(--ktp-font-display);
  font-size: var(--ktp-fs-h3);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 800;
}
:where(body.ktp-v2) main :where(p, li, dd, dt, blockquote, summary, label, input, select, textarea, button, td, th) {
  font-size: var(--ktp-fs-ui);
  line-height: 1.74;
}
:where(body.ktp-v2) main p,
:where(body.ktp-v2) main li,
:where(body.ktp-v2) main td,
:where(body.ktp-v2) main th { line-height: var(--ktp-lh-body); }
:where(body.ktp-v2) main .content-section > p,
:where(body.ktp-v2) main .content-section > ul,
:where(body.ktp-v2) main .content-section > ol,
:where(body.ktp-v2) main .content-section li,
:where(body.ktp-v2) main .pepper-section p,
:where(body.ktp-v2) main .pepper-section li,
:where(body.ktp-v2) main .guide-content > p,
:where(body.ktp-v2) main .guide-content li,
:where(body.ktp-v2) main .comparison-content p,
:where(body.ktp-v2) main .comparison-content li,
:where(body.ktp-v2) main .recipe-content p,
:where(body.ktp-v2) main .recipe-content li,
:where(body.ktp-v2) main .faq-answer,
:where(body.ktp-v2) main .aio-summary-box__text {
  font-size: var(--ktp-fs-body);
  line-height: var(--ktp-lh-body);
  color: var(--ktp-ink);
}
:where(body.ktp-v2) main :where([data-recipe-page], .comparison-content, .pepper-section, .guide-content, .recipe-content, .content-section) :where(p, li, span, div, a, label, button) {
  font-size: var(--ktp-fs-ui);
}
:where(body.ktp-v2) main .comp-table,
:where(body.ktp-v2) main .comparison-table,
:where(body.ktp-v2) main table {
  font-size: var(--ktp-fs-ui);
}
:where(body.ktp-v2) main .comp-table th,
:where(body.ktp-v2) main .comp-table td,
:where(body.ktp-v2) main .comparison-table th,
:where(body.ktp-v2) main .comparison-table td {
  font-size: var(--ktp-fs-ui);
  line-height: 1.7;
}
:where(body.ktp-v2) main small,
:where(body.ktp-v2) main figcaption,
:where(body.ktp-v2) main .breadcrumb,
:where(body.ktp-v2) main .meta,
:where(body.ktp-v2) main .tagline {
  font-size: var(--ktp-fs-ui);
  line-height: 1.58;
}
:where(body.ktp-v2) main select,
:where(body.ktp-v2) main button,
:where(body.ktp-v2) main input,
:where(body.ktp-v2) main textarea {
  font: inherit;
  font-size: 18px;
  line-height: 1.55;
}
@media (max-width: 768px) {
  :where(body.ktp-v2) main h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  :where(body.ktp-v2) main h2,
  :where(body.ktp-v2) main .pepper-section-h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); }
  :where(body.ktp-v2) main .content-section > p,
  :where(body.ktp-v2) main .content-section > ul,
  :where(body.ktp-v2) main .content-section > ol,
  :where(body.ktp-v2) main .content-section li,
  :where(body.ktp-v2) main .pepper-section p,
  :where(body.ktp-v2) main .pepper-section li,
  :where(body.ktp-v2) main .guide-content > p,
  :where(body.ktp-v2) main .guide-content li,
  :where(body.ktp-v2) main .comparison-content p,
  :where(body.ktp-v2) main .comparison-content li,
  :where(body.ktp-v2) main .recipe-content p,
  :where(body.ktp-v2) main .recipe-content li,
  :where(body.ktp-v2) main .faq-answer,
  :where(body.ktp-v2) main .aio-summary-box__text { font-size: 19.5px; }
}

/* Authored <mark> highlights: blush tint instead of the browser's yellow, which sits outside the palette. */
.ktp-v2 mark { background: var(--ktp-blush); color: inherit; padding: 0 .15em; border-radius: 2px; }

/* ── Icons (owner 2026-11-12, AGENTS.md §10): generated one-colour glyphs drawn as CSS masks, so they take
   currentColor. Markup comes from src/Icon.php (Icon::glyph); one file per glyph, direction variants rotate it. */
.ktp-icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ktp-icon--down { transform: rotate(90deg); }
.ktp-icon--left { transform: rotate(180deg); }
.ktp-icon--up { transform: rotate(-90deg); }
.ktp-icon--flip { transform: scaleY(-1); }
@media (forced-colors: active) { .ktp-icon { background-color: CanvasText; } }
.ktp-icon--chevron { --icon: url(/assets/images/icons/chevron-icon.webp); }
.ktp-icon--arrow { --icon: url(/assets/images/icons/arrow-icon.webp); }
.ktp-icon--check { --icon: url(/assets/images/icons/check-mark-icon.webp); }
.ktp-icon--chart { --icon: url(/assets/images/icons/bar-chart-icon.webp); }
.ktp-icon--flask { --icon: url(/assets/images/icons/lab-flask-icon.webp); }
.ktp-icon--pepper { --icon: url(/assets/images/icons/chili-pepper-icon.webp); }
.ktp-icon--swap { --icon: url(/assets/images/icons/swap-arrows-icon.webp); }
.ktp-icon--shield { --icon: url(/assets/images/icons/shield-check-icon.webp); }
.ktp-icon--book { --icon: url(/assets/images/icons/open-book-icon.webp); }
.ktp-icon--document { --icon: url(/assets/images/icons/document-page-icon.webp); }
.ktp-icon--plant { --icon: url(/assets/images/icons/seedling-icon.webp); }
.ktp-icon--search { --icon: url(/assets/images/icons/magnifying-glass-icon.webp); }
.ktp-icon--check-circle { --icon: url(/assets/images/icons/check-circle-icon.webp); }
.ktp-icon--pin { --icon: url(/assets/images/icons/map-pin-icon.webp); }
.ktp-icon--grid { --icon: url(/assets/images/icons/grid-squares-icon.webp); }
.ktp-icon--close { --icon: url(/assets/images/icons/close-x-icon.webp); }
.ktp-icon--flame { --icon: url(/assets/images/icons/flame-icon.webp); }
.ktp-icon--thermometer { --icon: url(/assets/images/icons/thermometer-icon.webp); }
.ktp-icon--warning { --icon: url(/assets/images/icons/warning-triangle-icon.webp); }
.ktp-icon--calculator { --icon: url(/assets/images/icons/calculator-icon.webp); }
.ktp-icon--cooking-pot { --icon: url(/assets/images/icons/cooking-pot-icon.webp); }
.ktp-icon--people { --icon: url(/assets/images/icons/two-people-icon.webp); }
.ktp-icon--info { --icon: url(/assets/images/icons/info-circle-icon.webp); }
.ktp-icon--lightbulb { --icon: url(/assets/images/icons/lightbulb-icon.webp); }
.ktp-icon--menu { --icon: url(/assets/images/icons/menu-lines-icon.webp); }
.ktp-icon--print { --icon: url(/assets/images/icons/printer-icon.webp); }
.ktp-icon--question { --icon: url(/assets/images/icons/question-circle-icon.webp); }
.ktp-icon--refresh { --icon: url(/assets/images/icons/refresh-arrows-icon.webp); }
.ktp-icon--calendar { --icon: url(/assets/images/icons/calendar-icon.webp); }
.ktp-icon--chat { --icon: url(/assets/images/icons/chat-bubble-icon.webp); }
.ktp-icon--fork-knife { --icon: url(/assets/images/icons/fork-and-knife-icon.webp); }
.ktp-icon--mail { --icon: url(/assets/images/icons/envelope-icon.webp); }
.ktp-icon--pencil { --icon: url(/assets/images/icons/pencil-icon.webp); }
.ktp-icon--plus { --icon: url(/assets/images/icons/plus-sign-icon.webp); }
.ktp-icon--target { --icon: url(/assets/images/icons/target-icon.webp); }
.ktp-icon--toolbox { --icon: url(/assets/images/icons/wrench-icon.webp); }
.ktp-icon--trophy { --icon: url(/assets/images/icons/trophy-icon.webp); }
.ktp-icon--upload { --icon: url(/assets/images/icons/upload-arrow-icon.webp); }
.ktp-icon--thumb { --icon: url(/assets/images/icons/thumbs-up-icon.webp); }
.ktp-icon--minus { --icon: url(/assets/images/icons/minus-sign-icon.webp); }
.ktp-icon--clock { --icon: url(/assets/images/icons/clock-icon.webp); }
.ktp-icon--tier-mild { --icon: url(/assets/images/icons/heat-gauge-mild-icon.webp); }
.ktp-icon--tier-medium { --icon: url(/assets/images/icons/heat-gauge-medium-icon.webp); }
.ktp-icon--tier-hot { --icon: url(/assets/images/icons/heat-gauge-hot-icon.webp); }
.ktp-icon--tier-extra-hot { --icon: url(/assets/images/icons/heat-gauge-extra-hot-icon.webp); }
.ktp-icon--tier-super-hot { --icon: url(/assets/images/icons/heat-gauge-super-hot-icon.webp); }
.ktp-icon--brand-instagram { --icon: url(/assets/images/icons/instagram-logo-icon.webp); }
.ktp-icon--brand-youtube { --icon: url(/assets/images/icons/youtube-logo-icon.webp); }
.ktp-icon--brand-pinterest { --icon: url(/assets/images/icons/pinterest-logo-icon.webp); }
.ktp-icon--brand-x { --icon: url(/assets/images/icons/x-logo-icon.webp); }
.ktp-icon--scissors { --icon: url(/assets/images/icons/scissors-icon.webp); }
.ktp-icon--snowflake { --icon: url(/assets/images/icons/snowflake-icon.webp); }
.ktp-icon--sun { --icon: url(/assets/images/icons/sun-icon.webp); }
.ktp-icon--drop { --icon: url(/assets/images/icons/water-drop-icon.webp); }
.ktp-icon--tag { --icon: url(/assets/images/icons/label-tag-icon.webp); }
.ktp-icon--bowl { --icon: url(/assets/images/icons/food-bowl-icon.webp); }
.ktp-icon--sliders { --icon: url(/assets/images/icons/adjustment-sliders-icon.webp); }
.ktp-icon--package { --icon: url(/assets/images/icons/cardboard-box-icon.webp); }
.ktp-icon--hourglass { --icon: url(/assets/images/icons/hourglass-icon.webp); }
.ktp-icon--shovel { --icon: url(/assets/images/icons/garden-trowel-icon.webp); }
.ktp-icon--flower { --icon: url(/assets/images/icons/flower-icon.webp); }
.ktp-icon--expand { --icon: url(/assets/images/icons/expand-arrows-icon.webp); }
.ktp-icon--palette { --icon: url(/assets/images/icons/paint-palette-icon.webp); }
.ktp-icon--bottle { --icon: url(/assets/images/icons/sauce-bottle-icon.webp); }
.ktp-icon--trash { --icon: url(/assets/images/icons/trash-can-icon.webp); }
.ktp-pepper-art, .ktp-topic-icon { display: inline-block; flex: none; object-fit: contain; vertical-align: middle; }
.ktp-breadcrumb-sep { margin: 0 6px; }