/* ==========================================================================
   A store page's and a news item's text (Topic/TopicDetails, News/NewsItem: .tc-topic-text):
   the product page's reading style and the standard format's elements (css/content-format.less
   - lead, note boxes, ticked lists, tags, steps, questions), the same mixins as the category's
   description. What the «قالب متن» panel writes for a topic or a news item shows as it will stay.
   Built: npx lessc topic-prose.less topic-prose.css
   ========================================================================== */
/* ---- THE FORMAT'S ELEMENTS ------------------------------------------------------------------
   The rules for them, as a mixin: called with the selector of the elements that show a formatted text -
   the product page's descriptions (product.less) and the category's and brand's description (category.less).
   What the editor's «قالب محتوا» menu writes (RichEditor.cshtml) and the admin's formatter keeps
   (Areas/Admin/TeslaCommerce/ContentFormat): a few classes on the text's own elements, nothing inline.
   The admin's editor shows them the same way (css/admin/content-format-editor.css mirrors this).
     span.tc-c-brand / -good / -bad       a word in the brand colour, green (a plus), red (a caution)
     mark                                 a highlighted run
     p.tc-note, p.tc-note--warn           a note box, a warning box
     ul.tc-list--check / -star / -cross   lists with a tick, a star, a cross for a marker
     ol.tc-list--steps                    numbered steps in round badges
     a.tc-jump                            a link to a section of the page (#pdp-specs ... template.js)
     p.tc-lead                            the opening paragraph, a step larger
     p.tc-note--tip                       a tip box (green, a light bulb)
     ul.tc-list--tags                     who or what it suits, as tags
     details > summary + p                a question and its answer (the full description's FAQ)
   ---- */
/* a pill's own icon, by what it names (TeslaFramework/Catalog/ContentTagIcons.cs sets li[data-tc-icon]) */
/* ---- THE TEXT'S OWN TYPOGRAPHY -----------------------------------------------------------------
   One scale for a long description, whatever page it sits on: the category's and the brand's text
   (category.less, every width) and the product's full description (product.less, the desktop).
   Before this each of them took its sizes from whichever older rule reached it - text-render.less
   (p 12px, every li grey #999), style.less (h1-h3 all 18px, p 14px at -0.5px tracking), the PDP's
   own block - so one text had paragraphs, list items and the lead at three sizes, h2 and h3 alike,
   a table with no lines, and gaps that added up differently after every kind of block.

     sizes         from the type ladder (base.less, --tc-fs-*): the text's headings sit under the
                   section's title and the page's h1 by construction - an h1 inside a text is set as
                   an h2, so no text can put up a heading that outranks the page it is on
     text          --tc-fs-body / 2.1, #2A303A, the same for p and li; a table's cells --tc-fs-small
     h2 / h3 / h4  --tc-fs-h2 / -h3 / -h4 - the section, its part, a label
     weights       the ladder's too: the text --tc-fw-text, its headings and bold words --tc-fw-label,
                   so no heading in a text is as heavy as the section's title over it
     rhythm        every block ends 20px down; a heading opens its own space above (h2 44, h3 30)
                   and sits 14/10px over its text; two lists in a row (pros, then cons) read as one
     table         a line under every row, a tinted header, the first column as the row's label

   Margins carry !important: the PDP's older block sets them that way, and texts pasted from other
   sites bring inline ones. The format's own elements (tc-lead, tc-note, tc-list--*, details) keep
   their looks from .tc-content-format above; the selectors here step around them.
   ---- */
/* the phone: the sizes come from the ladder's own phone step (base.less); here only the rhythm and
   the table's cells tighten */
.km-text-render.tc-topic-text {
  color: #2A303A;
  font-size: var(--tc-fs-body);
  line-height: 2.1;
  font-weight: var(--tc-fw-text);
  letter-spacing: normal;
  text-align: right;
  overflow-wrap: break-word;
}
.km-text-render.tc-topic-text :is(p, li, td, th, summary, blockquote, h1, h2, h3, h4, h5, h6) {
  letter-spacing: normal;
}
.km-text-render.tc-topic-text p:not(.tc-lead):not(.tc-note) {
  color: #2A303A;
  font-size: 1em;
  line-height: inherit;
  font-weight: var(--tc-fw-text);
}
/* the rhythm: each block ends a gap down, nothing pushes from above */
.km-text-render.tc-topic-text :is(p, ul, ol, table, blockquote, figure, dl) {
  min-height: auto !important;
  margin: 0 0 20px !important;
  padding-bottom: 0;
}
.km-text-render.tc-topic-text p.tc-note {
  margin: 4px 0 20px !important;
  font-size: var(--tc-fs-small);
  line-height: 1.95;
}
/* ---- headings ---- */
.km-text-render.tc-topic-text :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  min-height: auto !important;
  padding: 0;
  border: 0;
  color: #141A23;
  font-weight: var(--tc-fw-label);
  line-height: 1.65;
  text-align: right;
}
/* an h1 inside a text is the text's top heading, not the page's: it is set as an h2 */
.km-text-render.tc-topic-text :is(h1, h2) {
  margin: 44px 0 14px !important;
  font-size: var(--tc-fs-h2);
}
.km-text-render.tc-topic-text h3 {
  margin: 30px 0 10px !important;
  font-size: var(--tc-fs-h3);
  font-weight: var(--tc-fw-label);
}
.km-text-render.tc-topic-text :is(h4, h5, h6) {
  margin: 24px 0 8px !important;
  font-size: var(--tc-fs-h4);
  font-weight: var(--tc-fw-label);
}
/* a part straight under its section: the section's gap is enough */
.km-text-render.tc-topic-text :is(h1, h2, h3) + :is(h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
}
/* ---- lists ---- */
.km-text-render.tc-topic-text :is(ul, ol):not([class*="tc-list--"]) {
  padding: 0 22px 0 0;
}
.km-text-render.tc-topic-text ul:not([class*="tc-list--"]) {
  list-style: disc outside;
}
.km-text-render.tc-topic-text ol:not([class*="tc-list--"]) {
  list-style: decimal outside;
}
.km-text-render.tc-topic-text li {
  color: #2A303A !important;
  font-size: 1em;
  line-height: 2;
  font-weight: var(--tc-fw-text);
  text-align: right;
}
.km-text-render.tc-topic-text :is(ul, ol):not(.tc-list--tags) > li {
  margin: 0 0 6px !important;
}
.km-text-render.tc-topic-text :is(ul, ol):not(.tc-list--tags) > li:last-child {
  margin-bottom: 0 !important;
}
.km-text-render.tc-topic-text li::marker {
  color: #8A94A3;
}
.km-text-render.tc-topic-text li > :is(p, ul, ol) {
  margin: 6px 0 0 !important;
}
/* a list right after a list - the pros, then the cons - is one block: the items' own gap between them */
.km-text-render.tc-topic-text :is(ul, ol) + :is(ul, ol) {
  margin-top: -14px !important;
}
/* ---- inline ---- */
.km-text-render.tc-topic-text :is(strong, b) {
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.km-text-render.tc-topic-text a {
  color: #0A58B5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* ---- the table: a line under every row, the header tinted, the first column the row's label ---- */
.km-text-render.tc-topic-text table {
  width: 100% !important;
  max-width: 100%;
  margin: 4px 0 28px !important;
  border: 1px solid #E2E6EC !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #FFF;
  box-shadow: none !important;
  font-size: var(--tc-fs-small);
  line-height: 1.85;
}
.km-text-render.tc-topic-text :is(th, td) {
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #EDF0F4 !important;
  background: #FFF;
  color: #2A303A;
  font-size: var(--tc-fs-small);
  line-height: 1.85;
  font-weight: var(--tc-fw-text);
  text-align: right;
  vertical-align: top;
}
.km-text-render.tc-topic-text :is(th, td) + :is(th, td) {
  border-right: 1px solid #EDF0F4 !important;
}
.km-text-render.tc-topic-text :is(th, thead td) {
  background: #F5F7FA;
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.km-text-render.tc-topic-text tbody td:first-child:not(:only-child) {
  width: 28%;
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.km-text-render.tc-topic-text tbody > tr:nth-child(even) > td {
  background: #FAFBFC;
}
.km-text-render.tc-topic-text tbody > tr:last-child > * {
  border-bottom: 0 !important;
}
.km-text-render.tc-topic-text :is(th, td) :is(p, ul, ol) {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
}
/* ---- pictures, questions ---- */
.km-text-render.tc-topic-text img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto !important;
  margin: 8px auto !important;
  border-radius: 12px;
}
.km-text-render.tc-topic-text details {
  margin: 0 0 10px !important;
}
.km-text-render.tc-topic-text details > summary {
  font-size: 1em;
  line-height: 1.8;
}
.km-text-render.tc-topic-text details > :not(summary) {
  margin: 0 0 14px !important;
}
/* the text starts and ends flush with its box */
.km-text-render.tc-topic-text > :first-child {
  margin-top: 0 !important;
}
.km-text-render.tc-topic-text > :last-child {
  margin-bottom: 0 !important;
}
.km-text-render.tc-topic-text .tc-c-brand {
  color: var(--ryan-primary, #007ad0);
}
.km-text-render.tc-topic-text .tc-c-good {
  color: #0B8A55;
}
.km-text-render.tc-topic-text .tc-c-bad {
  color: #D2303C;
}
.km-text-render.tc-topic-text mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: #FFF0B3;
  color: inherit;
}
/* a box is as wide as its words and a little more, not the column: a one-line tip in a bar
       running to the far edge reads as a banner (a long note still wraps at the column) */
.km-text-render.tc-topic-text p.tc-note {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 16px;
  padding: 12px 44px 12px 14px;
  border-radius: 12px;
  background: #F2F6FC;
  color: #2F3B4C;
}
.km-text-render.tc-topic-text p.tc-note::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: #3B6FD8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.km-text-render.tc-topic-text p.tc-note--warn {
  background: #FFF6E5;
  color: #4A3A17;
}
.km-text-render.tc-topic-text p.tc-note--warn::before {
  background: #D98A00;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2v.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2v.01'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text p.tc-note--tip {
  background: #EAF7F0;
  color: #17402C;
}
.km-text-render.tc-topic-text p.tc-note--tip::before {
  background: #0B8A55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
/* the opening paragraph: what the product is, a step larger and darker than the text after it,
       not heavier (the ladder's weights, base.less) */
.km-text-render.tc-topic-text p.tc-lead {
  font-size: 1.07em;
  font-weight: var(--tc-fw-text);
  color: #1B2430;
}
/* lists with an icon for a marker: the marker is drawn, so the list keeps no indent of its own
       (the full description's desktop style puts a disc on every li with !important) */
.km-text-render.tc-topic-text ul:is(.tc-list--check, .tc-list--star, .tc-list--cross) {
  list-style: none;
  padding-right: 0;
}
.km-text-render.tc-topic-text :is(.tc-list--check, .tc-list--star, .tc-list--cross, .tc-list--steps, .tc-list--tags) > li {
  list-style: none !important;
}
/* who or what it suits, as flat topic pills (One UI's "Settings topics") - not the page's
       pills and chips (variants, product tags): a full round on a soft fill and a hairline, a
       small outline tag before the word, the text a step under the paragraph's */
.km-text-render.tc-topic-text ul.tc-list--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.km-text-render.tc-topic-text ul.tc-list--tags > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 14px 5px 12px;
  border: 1px solid #E8EAEE;
  border-radius: 999px;
  background: #F4F5F7;
  color: #2B3240 !important;
  font-size: 0.88em;
  font-weight: var(--tc-fw-text);
  line-height: 1.8;
}
.km-text-render.tc-topic-text ul.tc-list--tags > li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: #6B7380;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* each pill its own icon for what it names - a sofa for «اتاق نشیمن», a table for «میز عسلی»;
       the plain tag above stays for a pill no topic fits */
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="cup"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M7 2v3M11 2v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M7 2v3M11 2v3'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="meal"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V2M6 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V2M6 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="party"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15v4M17 17h4M5 3v3M3.5 4.5h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15v4M17 17h4M5 3v3M3.5 4.5h3'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="table"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M4 8v12M20 8v12M7 8v4h10V8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M4 8v12M20 8v12M7 8v4h10V8'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="bed"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v14M3 16h18v4M21 16v-3a3 3 0 0 0-3-3h-8v6'/%3E%3Ccircle cx='6.5' cy='12' r='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v14M3 16h18v4M21 16v-3a3 3 0 0 0-3-3h-8v6'/%3E%3Ccircle cx='6.5' cy='12' r='1.6'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="armchair"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11V7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4'/%3E%3Cpath d='M4 11a2 2 0 0 1 2 2v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11V7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4'/%3E%3Cpath d='M4 11a2 2 0 0 1 2 2v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="sofa"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2 13a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3Cpath d='M5 18v2M19 18v2M12 6v9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2 13a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3Cpath d='M5 18v2M19 18v2M12 6v9'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="lamp"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l3 8H5z'/%3E%3Cpath d='M12 11v8M8 21h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l3 8H5z'/%3E%3Cpath d='M12 11v8M8 21h8'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="home"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="gift"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="work"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="sport"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="travel"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='14' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M9.5 11v5M14.5 11v5M8 20v1.5M16 20v1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='14' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M9.5 11v5M14.5 11v5M8 20v1.5M16 20v1.5'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="nature"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.2-6.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.2-6.1'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="kids"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="study"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5M22 9v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5M22 9v5'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="heart"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="people"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="daily"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="luxury"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M12 21 8 9l2-6M12 21l4-12-2-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M12 21 8 9l2-6M12 21l4-12-2-6'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="clothes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6.6 16 4a4 4 0 0 1-8 0L3.6 6.6a1 1 0 0 0-.5 1.2l1 3a1 1 0 0 0 1.2.6L7 11v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-9l1.7.4a1 1 0 0 0 1.2-.6l1-3a1 1 0 0 0-.5-1.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6.6 16 4a4 4 0 0 1-8 0L3.6 6.6a1 1 0 0 0-.5 1.2l1 3a1 1 0 0 0 1.2.6L7 11v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-9l1.7.4a1 1 0 0 0 1.2-.6l1-3a1 1 0 0 0-.5-1.2z'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="winter"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="summer"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="water"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
}
.km-text-render.tc-topic-text ul.tc-list--tags > li[data-tc-icon="car"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17v-5l2.2-5h13.6l2.2 5v5M3 12h18M6 17h12'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17v-5l2.2-5h13.6l2.2 5v5M3 12h18M6 17h12'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
}
/* a question and its answer: the question a row to open, the answer under it */
.km-text-render.tc-topic-text details {
  margin: 0 0 10px;
  padding: 0 16px;
  border: 1px solid #E6E8EC;
  border-radius: 12px;
  background: #FFF;
}
.km-text-render.tc-topic-text details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-weight: var(--tc-fw-label);
  color: #1B2430;
  list-style: none;
  cursor: pointer;
}
.km-text-render.tc-topic-text details > summary::-webkit-details-marker {
  display: none;
}
.km-text-render.tc-topic-text details > summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: #8A9099;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.km-text-render.tc-topic-text details[open] > summary::after {
  transform: rotate(180deg);
}
.km-text-render.tc-topic-text details > :not(summary) {
  margin: 0 0 14px !important;
}
@media (prefers-reduced-motion: reduce) {
  .km-text-render.tc-topic-text details > summary::after {
    transition: none;
  }
}
.km-text-render.tc-topic-text :is(.tc-list--check, .tc-list--star, .tc-list--cross) > li {
  position: relative;
  padding-right: 28px;
}
.km-text-render.tc-topic-text :is(.tc-list--check, .tc-list--star, .tc-list--cross) > li::before {
  content: "";
  position: absolute;
  /* level with the first line: half the line's height, less half the icon */
  top: calc(0.95em - 9px);
  right: 0;
  width: 18px;
  height: 18px;
  -webkit-mask: var(--tc-list-icon) center / contain no-repeat;
  mask: var(--tc-list-icon) center / contain no-repeat;
}
.km-text-render.tc-topic-text .tc-list--check > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Ccircle cx='12' cy='12' r='11' fill='white'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E");
  background: #0B8A55;
}
.km-text-render.tc-topic-text .tc-list--star > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
  background: #F5A623;
}
.km-text-render.tc-topic-text .tc-list--cross > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Ccircle cx='12' cy='12' r='11' fill='white'/%3E%3Cpath d='m8.5 8.5 7 7m0-7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E");
  background: #D2303C;
}
/* steps: the number in a round badge, in Persian digits as the rest of the page */
.km-text-render.tc-topic-text ol.tc-list--steps {
  list-style: none;
  padding-right: 0;
  counter-reset: tc-step;
}
.km-text-render.tc-topic-text ol.tc-list--steps > li {
  position: relative;
  min-height: 26px;
  padding-right: 36px;
  counter-increment: tc-step;
}
.km-text-render.tc-topic-text ol.tc-list--steps > li::before {
  content: counter(tc-step, persian);
  position: absolute;
  top: calc(0.95em - 13px);
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* a pale tint of the store's colour, whatever it is set to */
  background: #EEF4FB;
  background: color-mix(in srgb, var(--ryan-primary, #007ad0) 12%, #FFF);
  color: var(--ryan-primary, #007ad0);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
/* a link to a part of the page: the link colour and a small arrow pointing down the page */
.km-text-render.tc-topic-text a.tc-jump {
  font-weight: 600;
  white-space: nowrap;
}
.km-text-render.tc-topic-text a.tc-jump::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.km-text-render.tc-topic-text hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #EEEEF0;
}
.km-text-render.tc-topic-text img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
@media (max-width: 767.98px) {
  .km-text-render.tc-topic-text {
    line-height: 2;
  }
  .km-text-render.tc-topic-text :is(h1, h2) {
    margin-top: 36px !important;
  }
  .km-text-render.tc-topic-text h3 {
    margin-top: 26px !important;
  }
  .km-text-render.tc-topic-text :is(th, td) {
    padding: 9px 12px !important;
  }
  .km-text-render.tc-topic-text tbody td:first-child:not(:only-child) {
    width: 34%;
  }
}
/* ---- a store page (Topic/TopicDetails): placed as a category page ---------------------------
   The breadcrumb is the category page's own (km-section > .size > .navCategory); under it the
   title, as the category's (22px / 700, its 26px to what follows), and the text as one reading
   column at the start of the line, about 75 characters wide. ---- */
.tc-topic {
  padding: 0 0 56px;
  direction: rtl;
  text-align: right;
}
.tc-topic__head {
  /* breadcrumb -> title: 24px, the category page's (its h1 below the crumb) */
  padding-top: 24px;
}
.tc-topic__head h1 {
  margin: 0 0 26px;
  color: #404040;
  font-family: IRANYekanX, tahoma, sans-serif;
  font-size: var(--tc-fs-page, 22px);
  font-weight: var(--tc-fw-title, 700);
  line-height: 1.25;
}
.tc-topic .tc-topic-text {
  max-width: 860px;
  margin: 0;
  padding: 0;
}
@media (max-width: 767.98px) {
  .tc-topic {
    padding: 0 16px 40px;
  }
  /* the phone's crumb row ends in its own 13px: 12 more, the page's small step */
  .tc-topic__head {
    padding-top: 12px;
  }
  .tc-topic__head h1 {
    margin-bottom: 18px;
  }
  .tc-topic .tc-topic-text {
    max-width: none;
  }
}
/* the breadcrumb sits where a category's does: the header's 32px and the crumb's 14px off, as theme-plp.css
   does for the listings (and brands.css for the brands page) - a sheet this page does not load */
body.tc-topic-body #vp-header {
  margin-bottom: 0;
}
body.tc-topic-body .km-section {
  padding-top: 0;
}
body.tc-topic-body .km-section > .size .navCategory {
  margin-top: 0;
}