/* MyFeaList front 1.9.2
 * One clean stylesheet (replaces the stacked 1.6.x / 1.7.x patch layers).
 * - Every size, colour and radius is a token declared once below; breakpoints only change tokens.
 * - Radius is capped at 7px (Salam Baba design system).
 * - No inline CSS / JS-injected CSS anywhere in the module.
 * - Layout adapts by itself (flex-wrap / minmax grids), so it holds from ~320px phones to 4K screens.
 * Markup hooks are unchanged: .myfealist-title, dl.myfealist-list, dl.myfealist-card-specs, .is-mf-ready, .is-wide.
 */

/* ---------- Tokens ---------- */
.myfealist-title,
.myfealist-list,
.myfealist-card-specs,
.myfealist-hr {
  --mf-ink: #111827;
  --mf-mute: #5f6877;
  /* Tile fill is a touch darker than the old #f5f6f8 AND every tile has a visible border: very light greys
     disappear on dim / low-quality phone screens, the border keeps tiles readable on every device. */
  --mf-soft: #eef1f5;
  --mf-tile-line: #d9dee6;
  --mf-line: #e2e6ec;
  --mf-line-strong: #cfd5de;
  --mf-dash: #9db9de;
  --mf-accent: #1877f2;
  --mf-accent-soft: #e8f1fe;
  --mf-accent-soft-hover: #dbeafd;
  --mf-accent-line: #a3c8fa;
  --mf-accent-ink: #1259ba;
  --mf-radius: 7px;
  --mf-ease: cubic-bezier(.22, .8, .3, 1);

  /* product page */
  --mf-gap: 4px;
  --mf-tile-min: 104px;
  --mf-tile-h: 32px;
  --mf-pad-y: 4px;
  --mf-pad-x: 10px;
  --mf-fs-title: 13.5px;
  --mf-fs-name: 11.5px;
  --mf-fs-val: 12.5px;

  /* listing cards */
  --mf-card-gap: 4px;
  --mf-card-row-h: 26px;
  --mf-card-tile-h: 28px;
  --mf-card-pad-x: 8px;
  --mf-card-fs-name: 11px;
  --mf-card-fs-val: 11.5px;
}

/* Very small phones (320-359px) */
@media (max-width: 359.98px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-gap: 3px;
    --mf-tile-min: 92px;
    --mf-tile-h: 30px;
    --mf-pad-x: 7px;
    --mf-fs-title: 12.5px;
    --mf-fs-name: 10.5px;
    --mf-fs-val: 11.5px;
    --mf-card-gap: 3px;
    --mf-card-pad-x: 6px;
    --mf-card-fs-name: 10px;
    --mf-card-fs-val: 10.5px;
  }
}

/* Regular phones (360-575px) */
@media (min-width: 360px) and (max-width: 575.98px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-tile-min: 104px;
    --mf-pad-x: 8px;
    --mf-fs-name: 11px;
    --mf-fs-val: 12px;
    --mf-card-pad-x: 7px;
    --mf-card-fs-name: 10.5px;
    --mf-card-fs-val: 11px;
  }
}

/* Large phones / small tablets (576-767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-tile-min: 120px;
    --mf-fs-name: 11.5px;
    --mf-fs-val: 12.5px;
    --mf-card-fs-name: 11px;
    --mf-card-fs-val: 11.5px;
  }
}

/* Tablets and small desktop windows (768-1199px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-tile-min: 132px;
    --mf-tile-h: 34px;
    --mf-fs-name: 12px;
    --mf-fs-val: 13px;
  }
}

/* Desktop and Full HD (1200-1919px) */
@media (min-width: 1200px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-gap: 5px;
    --mf-tile-min: 150px;
    --mf-tile-h: 36px;
    --mf-pad-x: 12px;
    --mf-fs-title: 14px;
    --mf-fs-name: 12.5px;
    --mf-fs-val: 13.5px;
    --mf-card-gap: 5px;
    --mf-card-row-h: 28px;
    --mf-card-tile-h: 30px;
    --mf-card-fs-name: 11.5px;
    --mf-card-fs-val: 12px;
  }
}

/* 2K / 4K screens */
@media (min-width: 1920px) {
  .myfealist-title, .myfealist-list, .myfealist-card-specs {
    --mf-tile-min: 180px;
    --mf-tile-h: 40px;
    --mf-pad-x: 14px;
    --mf-fs-title: 15px;
    --mf-fs-name: 13.5px;
    --mf-fs-val: 14.5px;
    --mf-card-row-h: 30px;
    --mf-card-tile-h: 32px;
    --mf-card-fs-name: 12.5px;
    --mf-card-fs-val: 13px;
  }
}

/* ---------- Shared pieces ---------- */
/* Theme rules for dl/dt/dd (margins, floats, bold) must never leak in: the few !important here are that reset. */
html body dl.myfealist-list,
html body dl.myfealist-card-specs {
  float: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
}
html body .myfealist-list dt,
html body .myfealist-list dd,
html body .myfealist-card-specs dt,
html body .myfealist-card-specs dd {
  float: none !important;
  width: auto;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-indent: 0;
}
html body .myfealist-list *::before,
html body .myfealist-list *::after,
html body .myfealist-card-specs *::before,
html body .myfealist-card-specs *::after {
  content: none;
}

/* Feature name: optional icon + text on one line, right aligned (RTL) */
html body .myfealist-name,
html body .myfealist-card-name {
  display: flex;
  align-items: center;
  gap: .38em;
  min-width: 0;
  color: var(--mf-mute);
  font-weight: 500;
  direction: rtl;
  text-align: right;
}
html body .myfealist-name .myfealist-ico,
html body .myfealist-card-name .myfealist-ico {
  display: block;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin: 0;
  fill: none;
  stroke: currentColor;
  opacity: .9;
}
html body .myfealist-name.is-icon-only .myfealist-ico,
html body .myfealist-card-name.is-icon-only .myfealist-ico {
  width: 1.6em;
  height: 1.6em;
}
html body .myfealist-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Product page ---------- */
html body b.myfealist-title {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--mf-ink);
  font-size: var(--mf-fs-title);
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
}
/* 1.10.3: no accent bar before the title */
html body b.myfealist-title::before { content: none; display: none; }

html body dl.myfealist-list.myfealist-context-product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--mf-tile-h), auto);
  gap: var(--mf-gap);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-block: 0;
  font: inherit;
  line-height: normal;
  transition: opacity .15s;
}
html body dl.myfealist-list.myfealist-loading { opacity: .55; }

html body .myfealist-list > .myfealist-item {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Tile: name and value share a line; a value that does not fit drops to its own full-width line. */
html body .myfealist-list .myfealist-item-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: var(--mf-tile-h);
  padding: var(--mf-pad-y) var(--mf-pad-x);
  border: 1px solid var(--mf-tile-line);
  border-radius: var(--mf-radius);
  background: var(--mf-soft);
  line-height: 1.35;
}
html body .myfealist-list .myfealist-name {
  flex: 0 1 auto;
  font-size: var(--mf-fs-name);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html body .myfealist-list .myfealist-name.is-icon-only { flex: none; }
html body .myfealist-list .myfealist-value {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: auto !important;
  color: var(--mf-ink);
  font-size: var(--mf-fs-val);
  font-weight: 700;
  line-height: 1.4;
  text-align: start;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
/* Every value is its own isolated run, so "30، 40" or 55" 65" 75" can never be reordered by RTL rules. */
html body .myfealist-value bdi { unicode-bidi: isolate; }

/* ---------- "View all features" ----------
 * The theme styles .tofea (and its children) for its own look. `all: unset` drops those rules so the module's own
 * design always wins, whatever the theme version. Two styles (admin): tile | line. */
html body .myfealist-list .myfealist-item--view-all {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  color: var(--mf-accent-ink);
  font-size: var(--mf-fs-val);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .myfealist-list .myfealist-item--view-all .myfealist-view-all-label {
  all: unset;
  display: block;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
  white-space: nowrap;
  direction: rtl;
}
html body .myfealist-list .myfealist-item--view-all .myfealist-view-all-chevron {
  all: unset;
  order: 2; /* RTL: the arrow sits on the left of the label */
  flex: none;
  display: block;
  width: 1.3em;
  height: 1.3em;
  color: currentColor;
  pointer-events: none;
}
html body .myfealist-list .myfealist-item--view-all:focus-visible {
  outline: 2px solid var(--mf-accent);
  outline-offset: 2px;
}

/* style 1: tile */
html body .myfealist-list .myfealist-view-all--tile {
  gap: 6px;
  min-height: var(--mf-tile-h);
  padding: var(--mf-pad-y) var(--mf-pad-x);
  border: 1px solid var(--mf-accent-line);
  border-radius: var(--mf-radius);
  background: var(--mf-accent-soft);
}
html body .myfealist-list .myfealist-view-all--tile .myfealist-view-all-label { white-space: normal; }

/* style 2: dashed line on both sides, label centred (only for the tiles / list layouts) */
html body .myfealist-list .myfealist-view-all--line {
  gap: 10px;
  min-height: var(--mf-tile-h);
}
html body .myfealist-list .myfealist-view-all--line::before,
html body .myfealist-list .myfealist-view-all--line::after {
  all: unset;
  content: "";
  display: block;
  flex: 1 1 0;
  min-width: 12px;
  height: 0;
  border-top: 1px dashed var(--mf-dash);
}
html body .myfealist-list .myfealist-view-all--line .myfealist-view-all-chevron { display: none; }
html body .myfealist-list .myfealist-view-all--line .myfealist-view-all-label {
  flex: none;
  padding: 6px 16px;
  border: 1px solid var(--mf-accent-line);
  border-radius: var(--mf-radius);
  background: #fff;
}

/* HR under the whole module (admin: show separator) */
html body hr.myfealist-hr {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  margin: 12px 0;
  border-top: 1px solid var(--mf-line);
}

/* ---------- Layout 1) tiles (default): auto columns ----------
 * Each tile asks for --mf-tile-min and grows to share its row: 3 fit -> 3, 4 fit -> 4, no room for two -> one
 * full-width tile. The last row stretches, so there is never a hole. Name on top, value under it; the value aligns
 * by its own language (dir is set per value): Persian right, English text / numbers left. */
html body dl.myfealist-list.myfealist-layout-tiles {
  display: flex;
  flex-wrap: wrap;
}
html body dl.myfealist-list.myfealist-layout-tiles > .myfealist-item:not(.myfealist-item--view-all) {
  display: flex;
  flex: 1 1 var(--mf-tile-min);
  max-width: 100%;
}
html body dl.myfealist-list.myfealist-layout-tiles .myfealist-view-all--tile { flex: 1 1 var(--mf-tile-min); }
html body dl.myfealist-list.myfealist-layout-tiles .myfealist-view-all--line { flex: 0 0 100%; margin-top: 2px; }
html body dl.myfealist-list.myfealist-layout-tiles .myfealist-item-inner:not(.myfealist-view-all) {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  height: auto;
  min-height: calc(var(--mf-tile-h) + 10px);
}
html body dl.myfealist-list.myfealist-layout-tiles .myfealist-value {
  display: block;
  flex: none;
  margin: 0 !important;
}

/* ---------- Product-page layouts (admin: Display settings > product page layout) ----------
 * tiles = default rules above. The others only override what differs.
 * Name text sits in .myfealist-name-text; in icons/chips the <dt> is display:contents so icon, value and name
 * can be placed in a grid (the !important on margin below beats the base value margin rule). */

/* 2) list: one line per feature */
html body dl.myfealist-list.myfealist-layout-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
html body dl.myfealist-list.myfealist-layout-list .myfealist-item-inner {
  flex-wrap: nowrap;
  gap: 10px;
  min-height: calc(var(--mf-tile-h) + 6px);
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px dashed var(--mf-line);
  border-radius: 0;
  background: none;
}
html body dl.myfealist-list.myfealist-layout-list .myfealist-name { gap: 10px; }
html body dl.myfealist-list.myfealist-layout-list .myfealist-name .myfealist-ico { width: 1.45em; height: 1.45em; opacity: .8; }
html body dl.myfealist-list.myfealist-layout-list .myfealist-value { font-size: calc(var(--mf-fs-val) + .5px); }
html body dl.myfealist-list.myfealist-layout-list .myfealist-item--view-all {
  margin-top: 10px;
  min-height: calc(var(--mf-tile-h) + 6px);
  border: 1px solid var(--mf-accent-line);
  border-radius: var(--mf-radius);
  background: none;
}

html body dl.myfealist-list.myfealist-layout-list .myfealist-view-all--line {
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background: none;
}

/* 1.10.0 — soft: «کاشی سبک» (rendered with .myfealist-layout-tiles too, so it keeps the tiles grid) — but white tiles with a thin frame
   (no grey fill), muted name and bold value; «همه ویژگی‌ها» is a small link under the tiles, not a big tile. */
html body dl.myfealist-list.myfealist-layout-soft .myfealist-item-inner:not(.myfealist-view-all) {
  min-height: 0;
  padding: 7px 10px;
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
html body dl.myfealist-list.myfealist-layout-soft .myfealist-name { color: #8a8f9c; font-size: 11.5px; font-weight: 400; }
html body dl.myfealist-list.myfealist-layout-soft .myfealist-value { color: #1f2937; font-size: 13px; font-weight: 700; }
/* 1.10.2: «همه ویژگی‌ها» = a small tile at the END of the last row (not a full row of its own), so the block
   keeps its height; only as wide as its text, dashed light-blue frame, solid on hover. */
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 7px 14px;
  border: 1px dashed #a3c8fa;
  border-radius: 8px;
  background: #f5f9ff;
  box-shadow: none;
  color: #1259ba;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transform: none;
}
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all::before,
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all::after { content: none; display: none; }
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all .myfealist-view-all-label { order: 1; padding: 0; border: 0; background: none; white-space: nowrap; text-decoration: none; }
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all .myfealist-view-all-chevron { order: 2; display: block; width: 16px; height: 16px; transform: none; }
html body dl.myfealist-list.myfealist-layout-soft .myfealist-view-all:focus-visible { outline: 2px solid #3775e9; outline-offset: 2px; }
@media (max-width: 767px) {
  html body dl.myfealist-list.myfealist-layout-soft .myfealist-item-inner:not(.myfealist-view-all) { padding: 6px 8px; }
  html body dl.myfealist-list.myfealist-layout-soft .myfealist-name { font-size: 11px; }
  html body dl.myfealist-list.myfealist-layout-soft .myfealist-value { font-size: 12.5px; }
}

/* 3) icons: three columns, icon over value over name */
html body dl.myfealist-list.myfealist-layout-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
html body dl.myfealist-list.myfealist-layout-icons .myfealist-view-all--full-row { grid-column: auto; }
html body dl.myfealist-list.myfealist-layout-icons .myfealist-item-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: calc(var(--mf-tile-h) * 2.4);
  padding: 8px 4px;
  text-align: center;
}
html body dl.myfealist-list.myfealist-layout-icons .myfealist-name,
html body dl.myfealist-list.myfealist-layout-chips .myfealist-name { display: contents; }
html body dl.myfealist-list.myfealist-layout-icons .myfealist-name .myfealist-ico { grid-row: 1; width: 22px; height: 22px; color: var(--mf-accent); opacity: 1; }
html body dl.myfealist-list.myfealist-layout-icons .myfealist-value {
  grid-row: 2;
  margin: 0 !important;
  max-width: 100%;
  font-weight: 800;
  text-align: center;
}
html body dl.myfealist-list.myfealist-layout-icons .myfealist-name-text {
  grid-row: 3;
  max-width: 100%;
  color: var(--mf-mute);
  font-size: calc(var(--mf-fs-name) - .5px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
html body dl.myfealist-list.myfealist-layout-icons .myfealist-item--view-all {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--mf-tile-h) * 2.4);
  gap: 3px;
}
html body dl.myfealist-list.myfealist-layout-icons .myfealist-item--view-all .myfealist-view-all-chevron { order: 0; }
html body dl.myfealist-list.myfealist-layout-icons .myfealist-item--view-all .myfealist-view-all-label { white-space: normal; font-size: calc(var(--mf-fs-name) + .5px); text-align: center; }

/* 4) chips: one scrolling row, icon beside value over name */
html body dl.myfealist-list.myfealist-layout-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding-bottom: 2px !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html body dl.myfealist-list.myfealist-layout-chips::-webkit-scrollbar { display: none; }
html body dl.myfealist-list.myfealist-layout-chips > .myfealist-item { flex: none; width: auto; }
html body dl.myfealist-list.myfealist-layout-chips .myfealist-item-inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: 8px;
  row-gap: 1px;
  width: auto;
  height: calc(var(--mf-tile-h) * 1.45);
  min-height: 0;
  padding: 0 10px;
  white-space: nowrap;
}
html body dl.myfealist-list.myfealist-layout-chips .myfealist-name .myfealist-ico { grid-area: 1 / 1 / 3 / 2; width: 20px; height: 20px; color: var(--mf-accent); opacity: 1; }
html body dl.myfealist-list.myfealist-layout-chips .myfealist-value {
  grid-area: 1 / 2;
  margin: 0 !important;
  font-weight: 800;
  line-height: 1.3;
}
html body dl.myfealist-list.myfealist-layout-chips .myfealist-name-text {
  grid-area: 2 / 2;
  color: var(--mf-mute);
  font-size: calc(var(--mf-fs-name) - 1.5px);
  font-weight: 500;
  line-height: 1.3;
}
html body dl.myfealist-list.myfealist-layout-chips .myfealist-item-inner:not(:has(.myfealist-ico)) { grid-template-columns: auto; }
html body dl.myfealist-list.myfealist-layout-chips .myfealist-item-inner:not(:has(.myfealist-ico)) .myfealist-value,
html body dl.myfealist-list.myfealist-layout-chips .myfealist-item-inner:not(:has(.myfealist-ico)) .myfealist-name-text { grid-column: 1; }
html body dl.myfealist-list.myfealist-layout-chips .myfealist-item--view-all {
  display: flex;
  flex: none;
  width: auto;
  height: calc(var(--mf-tile-h) * 1.45);
  min-height: 0;
  padding: 0 12px;
  white-space: nowrap;
}

/* 5) table: one bordered card, hairline dividers, name above value */
html body dl.myfealist-list.myfealist-layout-table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 1px;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  background: var(--mf-line);
  overflow: hidden;
}
html body dl.myfealist-list.myfealist-layout-table > .myfealist-item.is-long,
html body dl.myfealist-list.myfealist-layout-table .myfealist-item--view-all { grid-column: 1 / -1; }
html body dl.myfealist-list.myfealist-layout-table .myfealist-item-inner {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: calc(var(--mf-tile-h) * 1.6);
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
html body dl.myfealist-list.myfealist-layout-table .myfealist-name { flex: none; font-size: calc(var(--mf-fs-name) - .5px); }
html body dl.myfealist-list.myfealist-layout-table .myfealist-value {
  flex: none;
  max-width: 100%;
  margin: 0 !important;
  font-size: calc(var(--mf-fs-val) + .5px);
  font-weight: 800;
}
html body dl.myfealist-list.myfealist-layout-table .myfealist-item--view-all {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--mf-tile-h) * 1.25);
  background: var(--mf-accent-soft);
}

/* ---------- Listing cards ---------- */
html body dl.myfealist-card-specs {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-block: 6px 8px;
  font: inherit;
  line-height: 1.4;
  text-align: initial;
}
html body .myfealist-card-specs .myfealist-card-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--mf-card-row-h);
  margin: 0;
  padding: 3px 2px;
  border-bottom: 1px dashed var(--mf-line);
  direction: rtl;
}
html body .myfealist-card-specs .myfealist-card-row:last-child { border-bottom: 0; }

html body .myfealist-card-specs .myfealist-card-name {
  justify-self: start;
  font-size: var(--mf-card-fs-name);
  line-height: 1.4;
  white-space: nowrap;
}
html body .myfealist-card-specs .myfealist-card-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--mf-ink);
  font-size: var(--mf-card-fs-val);
  font-weight: 700;
  line-height: 1.3;
  direction: ltr;
  text-align: left;
  white-space: nowrap;
  unicode-bidi: isolate;
}
html body .myfealist-card-specs .myfealist-card-value-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  unicode-bidi: isolate; /* dir="rtl|ltr" is set per value by the template */
}

/* "+" / "−" toggle (added by myfealist-card.js only when the text does not fit) */
html body .myfealist-card-specs .myfealist-card-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mf-accent-line);
  border-radius: var(--mf-radius);
  background: var(--mf-accent-soft);
  color: var(--mf-accent-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html body .myfealist-card-specs .myfealist-card-more:focus-visible {
  outline: 2px solid var(--mf-accent);
  outline-offset: 1px;
}
html body .myfealist-card-specs .myfealist-card-value.is-expanded {
  align-items: flex-start;
  overflow: visible;
  white-space: normal;
}
html body .myfealist-card-specs .myfealist-card-value.is-expanded .myfealist-card-value-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 1.9.2 - name + value do not fit on one row: value goes under the name, full row width (set by myfealist-card.js) */
html body .myfealist-card-specs .myfealist-card-row.is-stacked {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;
  align-items: start;
  padding-block: 4px;
}
html body .myfealist-card-specs .myfealist-card-row.is-stacked .myfealist-card-name { justify-self: start; }
html body .myfealist-card-specs .myfealist-card-row.is-stacked .myfealist-card-value {
  justify-self: stretch;
  direction: rtl;           /* value starts at the same (right) edge as the name; text keeps its own dir */
}

/* Smart two-column tiles: myfealist-card.js adds .is-mf-ready, and .is-wide on rows that do not fit a half cell.
 * Without JS, or with data-mf-cols="1", the plain row list above is used. */
html body dl.myfealist-card-specs[data-mf-cols="2"].is-mf-ready {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mf-card-gap);
  direction: rtl;
}
html body dl.myfealist-card-specs[data-mf-cols="2"].is-mf-ready > .myfealist-card-row {
  grid-column: auto;
  column-gap: 6px;
  min-height: var(--mf-card-tile-h);
  padding: 3px var(--mf-card-pad-x);
  border-radius: var(--mf-radius);
  background: var(--mf-soft);
}
html body dl.myfealist-card-specs[data-mf-cols="2"].is-mf-ready > .myfealist-card-row.is-wide { grid-column: 1 / -1; }

/* ---------- Device visibility for listing cards (admin: show on mobile / desktop / both) ---------- */
@media (max-width: 767.98px) {
  html body .myfealist-hide-mobile { display: none !important; }
  html body article.sbfpc-v4 .sbfpc-v4__specs:has(.myfealist-hide-mobile) { display: none !important; }
}
@media (min-width: 768px) {
  html body .myfealist-hide-desktop { display: none !important; }
  html body article.sbfpc-v4 .sbfpc-v4__specs:has(.myfealist-hide-desktop) { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .myfealist-list,
  html body .myfealist-list *,
  html body .myfealist-card-specs * { transition: none; }
}

@media (forced-colors: active) {
  html body .myfealist-list .myfealist-item-inner,
  html body .myfealist-card-specs[data-mf-cols="2"].is-mf-ready > .myfealist-card-row { border-color: ButtonBorder; }
}

/* ---------- Valid <dl> markup (validator: dl > div > dt + dd only) ----------
 * Each feature's box is now the dl's own <div> (it carries both .myfealist-item and .myfealist-item-inner).
 * In the tiles layout the inner rule (flex: 1 1 auto) would win over the item's flex-basis, so restore it.
 * The "view all" <button> sits in a dt/dd pair whose wrappers are display:contents, so it is still a flex/grid
 * item of the list exactly like before. */
html body dl.myfealist-list.myfealist-layout-tiles > .myfealist-item.myfealist-item-inner:not(.myfealist-item--view-all) {
  flex: 1 1 var(--mf-tile-min);
  max-width: 100%;
}
html body dl.myfealist-list > .myfealist-view-all-row,
html body dl.myfealist-list > .myfealist-view-all-row > .myfealist-view-all-dt {
  display: contents;
}
html body dl.myfealist-list > .myfealist-view-all-row > .myfealist-view-all-dd { display: none !important; }


/* ---------- 1.9.5 - Listing card, one-column (list) mode only ----------
 * Admin «ستون‌های کارت = ۱»: feature NAME bold with a leading dot, VALUE lighter.
 * Two-column tiles and the product page are untouched. */
html body dl.myfealist-card-specs[data-mf-cols="1"] .myfealist-card-name {
  color: var(--mf-ink);
  font-weight: 700;
}
html body dl.myfealist-card-specs[data-mf-cols="1"] .myfealist-card-name:not(.is-icon-only)::before {
  content: "";
  flex: none;
  width: .38em;
  height: .38em;
  border-radius: 50%;
  background: var(--mf-accent);
}
html body dl.myfealist-card-specs[data-mf-cols="1"] .myfealist-card-value {
  color: var(--mf-mute);
  font-weight: 400;
}
/* 1.9.6 - same mode: a colon glued to the name (cancels the flex gap) and zero space towards the card image. */
html body dl.myfealist-card-specs[data-mf-cols="1"] .myfealist-card-name:not(.is-icon-only)::after {
  content: ":";
  margin-inline-start: calc(-.38em + 1px);
  font: inherit;
}
html body dl.myfealist-card-specs[data-mf-cols="1"] .myfealist-card-row { padding-inline-start: 0; }
html body article.sbfpc-v4 .sbfpc-v4__specs:has(dl.myfealist-card-specs[data-mf-cols="1"]) {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}
html body article.sbfpc-v4 :has(> .sbfpc-v4__specs dl.myfealist-card-specs[data-mf-cols="1"]) { column-gap: 0 !important; }

/* 1.9.7 - spacing between feature rows on product cards (admin: فاصله‌ی ردیف‌های ویژگی در کارت محصول).
 * normal = unchanged; compact / tight lower the row height so the whole card gets shorter. All widths. */
html body dl.myfealist-card-specs[data-mf-space="compact"] { --mf-card-row-h: 21px; --mf-card-tile-h: 24px; --mf-card-gap: 3px; }
html body dl.myfealist-card-specs[data-mf-space="tight"]   { --mf-card-row-h: 18px; --mf-card-tile-h: 21px; --mf-card-gap: 2px; }
html body dl.myfealist-card-specs[data-mf-space="compact"] .myfealist-card-row { min-height: var(--mf-card-row-h) !important; padding-block: 1px !important; }
html body dl.myfealist-card-specs[data-mf-space="tight"] .myfealist-card-row { min-height: var(--mf-card-row-h) !important; padding-block: 0 !important; }
html body dl.myfealist-card-specs:is([data-mf-space="compact"],[data-mf-space="tight"]) :is(.myfealist-card-name,.myfealist-card-value) { line-height: 1.3 !important; }

/* 1.10.3: product page — no hover/active effects at all (also blocks theme a:hover / dl hover rules) */
html body dl.myfealist-list.myfealist-context-product *,
html body dl.myfealist-list.myfealist-context-product *::before,
html body dl.myfealist-list.myfealist-context-product *::after { transition: none !important; }
html body dl.myfealist-list.myfealist-context-product a:hover,
html body dl.myfealist-list.myfealist-context-product a:hover * { text-decoration: none !important; }

/* ---------- 1.10.4 — yes/no values as a grey tick / cross ----------
 * Admin «مقادیر دارد / ندارد». Pencil-grey icon (not green/red), on the line under the name, far LEFT of the box. */
.myfealist-list,
.myfealist-card-specs {
  --mf-bool-ink: #4b5563;
  --mf-bool-size: 20px;
  --mf-bool-size-card: 17px;
}
html body .myfealist-list .myfealist-value.myfealist-bool,
html body .myfealist-card-specs .myfealist-card-value-text.myfealist-bool {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: visible;
  color: var(--mf-bool-ink) !important;
  line-height: 0;
}
html body .myfealist-list .myfealist-bool-ico {
  display: block;
  flex: none;
  width: var(--mf-bool-size);
  height: var(--mf-bool-size);
}
html body .myfealist-card-specs .myfealist-bool-ico {
  display: block;
  flex: none;
  width: var(--mf-bool-size-card);
  height: var(--mf-bool-size-card);
}
/* any layout: the icon goes to the far left of its box */
html body dl.myfealist-list > .myfealist-item.is-bool .myfealist-value.myfealist-bool { margin-inline-start: auto !important; }

/* tiles + soft: icon stays on its own line under the name (like every other value), pushed to the far left */
html body dl.myfealist-list.myfealist-layout-tiles > .myfealist-item.is-bool .myfealist-value.myfealist-bool {
  display: flex !important;
  align-self: flex-end;          /* column flex in RTL: cross-axis end = left */
  justify-content: flex-end;
}

/* listing cards: keep the icon on the left even when the row is stacked */
html body .myfealist-card-specs .myfealist-card-row.is-bool .myfealist-card-value { justify-self: end; justify-content: flex-start; overflow: visible; }

@media (max-width: 380px) {
  .myfealist-list, .myfealist-card-specs { --mf-bool-size: 18px; --mf-bool-size-card: 16px; }
}
@media (min-width: 1920px) {
  .myfealist-list { --mf-bool-size: 22px; }
}
@media (forced-colors: active) {
  html body .myfealist-bool { color: CanvasText !important; }
}

/* ---------- 1.10.4 — product page text (admin «متن کارت‌های ویژگی در صفحه محصول») ----------
 * name_bold: feature NAME dark (regular weight), VALUE thin + muted. Same size for both,
 * taken from the responsive tokens so every breakpoint keeps its own scale. value_bold = old look (no rules). */
html body dl.myfealist-list.myfealist-context-product.myfealist-text-name_bold .myfealist-name,
html body dl.myfealist-list.myfealist-context-product.myfealist-text-name_bold .myfealist-name-text {
  color: var(--mf-ink);
  font-size: var(--mf-fs-val);
  font-weight: 400;
}
html body dl.myfealist-list.myfealist-context-product.myfealist-text-name_bold .myfealist-value:not(.myfealist-bool) {
  color: var(--mf-mute);
  font-size: var(--mf-fs-val);
  font-weight: 400;
}