.ct-box.ct-social > p { margin: 0 0 13px }

.ct-social-row,
.ct-box.ct-social .ct-social-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 }

.ct-social-row a,
.ct-social-row a.sf-soc,
.ct-box.ct-social .ct-social-row a.sf-soc {
  --so-b: var(--v9-accent, var(--green));
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; height: auto; min-height: 40px; padding: 9px 13px;
  border-radius: 13px;
  background: var(--surface2);
  border: 1px solid var(--sf-hair, var(--line));
  color: var(--ink);
  font: 800 11.5px var(--font, Vazirmatn), sans-serif;
  font-size: calc(11.5px * var(--fz-base, 1));
  text-decoration: none;
  box-shadow: none;
  transition: background .17s ease, border-color .17s ease, color .17s ease,
              transform .17s ease, box-shadow .17s ease;
}

.ct-social-row a.sf-soc .sf-soc-i,
.ct-social-row a.sf-soc .nv-i,
.ct-social-row a.sf-soc .sf-i,
.ct-social-row a.sf-soc svg {
  width: 18px; height: 18px; flex: none;
  color: inherit; stroke: currentColor;
}
.ct-social-row a.sf-soc .nv-i-img { border-radius: 5px; object-fit: contain }
.ct-social-row a.sf-soc > span { white-space: nowrap }

.ct-social-row a.sf-soc.is-instagram { --so-b: oklch(58% .21 15) }
.ct-social-row a.sf-soc.is-telegram  { --so-b: oklch(60% .14 235) }
.ct-social-row a.sf-soc.is-whatsapp  { --so-b: oklch(58% .16 152) }
.ct-social-row a.sf-soc.is-rubika    { --so-b: oklch(58% .17 285) }
.ct-social-row a.sf-soc.is-eitaa     { --so-b: oklch(58% .14 195) }
.ct-social-row a.sf-soc.is-bale      { --so-b: oklch(60% .15 145) }
.ct-social-row a.sf-soc.is-soroush   { --so-b: oklch(60% .16 45) }
.ct-social-row a.sf-soc.is-igap      { --so-b: oklch(58% .15 210) }
.ct-social-row a.sf-soc.is-gap       { --so-b: oklch(58% .15 175) }
.ct-social-row a.sf-soc.is-aparat    { --so-b: oklch(58% .18 20) }
.ct-social-row a.sf-soc.is-youtube   { --so-b: oklch(56% .21 26) }
.ct-social-row a.sf-soc.is-x         { --so-b: oklch(45% .02 260) }
.ct-social-row a.sf-soc.is-linkedin  { --so-b: oklch(52% .13 245) }
.ct-social-row a.sf-soc.is-facebook  { --so-b: oklch(54% .16 262) }
.ct-social-row a.sf-soc.is-pinterest { --so-b: oklch(55% .19 22) }
.ct-social-row a.sf-soc.is-threads   { --so-b: oklch(48% .02 280) }

.ct-social-row a:hover,
.ct-social-row a:focus-visible,
.ct-social-row a.sf-soc:hover,
.ct-social-row a.sf-soc:focus-visible,
.ct-box.ct-social .ct-social-row a.sf-soc:hover,
.ct-box.ct-social .ct-social-row a.sf-soc:focus-visible {
  background: color-mix(in oklab, var(--so-b) 11%, var(--surface));
  border-color: color-mix(in oklab, var(--so-b) 44%, transparent);
  color: color-mix(in oklab, var(--so-b) 86%, var(--ink));
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px color-mix(in oklab, var(--so-b) 70%, transparent);
  outline: 0;
}
.ct-social-row a.sf-soc:active,
.ct-box.ct-social .ct-social-row a.sf-soc:active { transform: translateY(0) }
.ct-social-row a.sf-soc:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--so-b) 26%, transparent);
}

html[data-theme="dark"] .ct-social-row a.sf-soc,
html[data-theme="dark"] .ct-box.ct-social .ct-social-row a.sf-soc {
  background: color-mix(in oklab, var(--ink) 5%, var(--surface));
  border-color: color-mix(in oklab, var(--ink) 14%, transparent);
  color: var(--ink);
}
html[data-theme="dark"] .ct-social-row a:hover,
html[data-theme="dark"] .ct-social-row a:focus-visible,
html[data-theme="dark"] .ct-social-row a.sf-soc:hover,
html[data-theme="dark"] .ct-social-row a.sf-soc:focus-visible,
html[data-theme="dark"] .ct-box.ct-social .ct-social-row a.sf-soc:hover,
html[data-theme="dark"] .ct-box.ct-social .ct-social-row a.sf-soc:focus-visible {
  background: color-mix(in oklab, var(--so-b) 22%, var(--surface));
  border-color: color-mix(in oklab, var(--so-b) 52%, transparent);
  color: color-mix(in oklab, var(--so-b) 55%, white);
  box-shadow: 0 10px 22px -14px color-mix(in oklab, var(--so-b) 80%, transparent);
}
html[data-theme="dark"] .ct-social-row a.sf-soc:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--so-b) 34%, transparent);
}

@media (max-width: 560px) {
  .ct-social-row a.sf-soc,
  .ct-box.ct-social .ct-social-row a.sf-soc { min-height: 42px; padding: 10px 13px }
}

.mc-qty, aside.mc .mc-qty {
  display: inline-flex !important; align-items: center; flex: none;
  height: 32px; padding: 0; overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--sf-hair, var(--line));
  border-radius: 11px;
  box-shadow: none;
}
.mc-qty button, aside.mc .mc-qty button {
  display: grid !important; place-items: center;
  width: 32px; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
  color: var(--v9-accent, var(--green));
  font: 800 17px/1 var(--font, Vazirmatn), sans-serif;
  font-size: calc(17px * var(--fz-btn, 1));
  transition: background .15s linear, color .15s linear;
}
.mc-qty button:hover:not(:disabled), aside.mc .mc-qty button:hover:not(:disabled) {
  background: var(--sf-soft, var(--v9-tint));
  color: var(--v9-accent, var(--green));
}
.mc-qty button:active:not(:disabled), aside.mc .mc-qty button:active:not(:disabled) {
  background: color-mix(in oklab, var(--v9-accent, var(--green)) 20%, var(--surface2));
}
.mc-qty button:focus-visible, aside.mc .mc-qty button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--v9-accent, var(--green)) 55%, transparent);
}
.mc-qty button:disabled, aside.mc .mc-qty button:disabled {
  background: transparent; color: var(--muted); opacity: .42; cursor: not-allowed;
}
.mc-qty input, aside.mc .mc-qty input {
  width: 48px; min-width: 48px; height: 100%;
  border: 0; border-inline: 1px solid var(--sf-hair, var(--line));
  background: var(--surface); color: var(--ink);
  text-align: center; padding-inline: 4px; outline: 0; box-shadow: none !important;
  font: 800 13px/1 var(--font, Vazirmatn), sans-serif;
  font-size: calc(13px * var(--fz-form, 1));
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.mc-qty input:focus-visible, aside.mc .mc-qty input:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--v9-accent, var(--green)) 55%, transparent) !important;
}

html[data-theme="dark"] .mc-qty, html[data-theme="dark"] aside.mc .mc-qty {
  background: color-mix(in oklab, var(--ink) 6%, var(--surface));
  border-color: color-mix(in oklab, var(--ink) 15%, transparent);
}
html[data-theme="dark"] .mc-qty input, html[data-theme="dark"] aside.mc .mc-qty input {
  background: color-mix(in oklab, var(--ink) 2%, var(--surface));
  border-inline-color: color-mix(in oklab, var(--ink) 15%, transparent);
}
html[data-theme="dark"] .mc-qty button:hover:not(:disabled),
html[data-theme="dark"] aside.mc .mc-qty button:hover:not(:disabled) {
  background: color-mix(in oklab, var(--v9-accent, var(--green)) 20%, transparent);
  color: color-mix(in oklab, var(--v9-accent, var(--green)) 45%, white);
}

@media (max-width: 560px) {
  .mc-qty, aside.mc .mc-qty { height: 38px; border-radius: 12px }
  .mc-qty button, aside.mc .mc-qty button { width: 38px; font-size: calc(18px * var(--fz-btn, 1)) }
  .mc-qty input, aside.mc .mc-qty input { width: 52px; min-width: 52px; font-size: calc(14px * var(--fz-form, 1)) }
}

.wo-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.wo-head .wo-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--sf-soft, var(--v9-tint)); color: var(--v9-accent, var(--green));
  font: 800 11px var(--font, Vazirmatn), sans-serif;
  font-variant-numeric: tabular-nums;
}

.acc-table.wo-table table { min-width: 760px }
.acc-table.wo-table td { vertical-align: middle }
.wo-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100% }

.wo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 5px 9px; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--sf-hair, var(--line));
  color: var(--ink);
  font: 800 11.5px/1.6 var(--font, Vazirmatn), sans-serif;
  font-size: calc(11.5px * var(--fz-base, 1));
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wo-chip.is-ref {
  color: var(--v9-accent, var(--green));
  border-color: color-mix(in oklab, var(--v9-accent, var(--green)) 30%, transparent);
  background: color-mix(in oklab, var(--v9-accent, var(--green)) 8%, var(--surface));
}
.wo-chip.is-sheba { color: var(--muted); font-weight: 700 }
.wo-empty { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums }

.wo-copy {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid var(--sf-hair, var(--line)); border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; padding: 0;
  font: 700 10.5px var(--font, Vazirmatn), sans-serif;
  transition: background .15s linear, color .15s linear, border-color .15s linear;
}
.wo-copy .sf-i, .wo-copy .nv-i, .wo-copy svg { width: 14px; height: 14px }
.wo-copy:hover {
  background: var(--sf-soft, var(--v9-tint)); color: var(--v9-accent, var(--green));
  border-color: color-mix(in oklab, var(--v9-accent, var(--green)) 38%, transparent);
}
.wo-copy.is-done {
  width: auto; padding: 0 8px; color: var(--green);
  border-color: color-mix(in oklab, var(--green) 40%, transparent);
}

.wo-amount { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap }
.wo-amount small {
  display: block; margin-top: 2px; font-weight: 700; color: var(--muted);
  font-size: calc(10px * var(--fz-base, 1));
}

.wo-date { display: grid; gap: 2px; white-space: nowrap }
.wo-date b { font-weight: 800; font-variant-numeric: tabular-nums }
.wo-date small { color: var(--muted); font-variant-numeric: tabular-nums; font-size: calc(10px * var(--fz-base, 1)) }

.wo-state { display: grid; gap: 6px; justify-items: start }
.wo-state .status { white-space: nowrap }
.wo-note {
  display: block; max-width: 250px; white-space: normal; line-height: 1.8;
  color: var(--muted); font: 700 10.5px var(--font, Vazirmatn), sans-serif;
  font-size: calc(10.5px * var(--fz-base, 1));
}
.wo-note.is-bad { color: var(--red) }

.wo-act { display: flex; justify-content: flex-end }
.wo-act form { margin: 0 }
.wo-cancel {
  border: 1px solid color-mix(in oklab, var(--red) 32%, transparent);
  background: color-mix(in oklab, var(--red) 7%, var(--surface));
  color: var(--red); border-radius: 10px; cursor: pointer;
  padding: 7px 12px; font: 800 11px var(--font, Vazirmatn), sans-serif;
  font-size: calc(11px * var(--fz-btn, 1));
  transition: background .15s linear, color .15s linear, border-color .15s linear;
}
.wo-cancel:hover { background: var(--red); border-color: var(--red); color: #fff }

.wo-legend {
  display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0; padding: 10px 12px;
  border: 1px dashed var(--sf-hair, var(--line)); border-radius: 12px;
  background: var(--surface2); color: var(--muted);
  font: 700 10.5px/1.9 var(--font, Vazirmatn), sans-serif;
  font-size: calc(10.5px * var(--fz-base, 1));
}
.wo-legend b { color: var(--ink) }

html[data-theme="dark"] .wo-chip {
  background: color-mix(in oklab, var(--ink) 5%, var(--surface));
  border-color: color-mix(in oklab, var(--ink) 14%, transparent);
}
html[data-theme="dark"] .wo-chip.is-ref {
  color: color-mix(in oklab, var(--v9-accent, var(--green)) 45%, white);
  background: color-mix(in oklab, var(--v9-accent, var(--green)) 16%, var(--surface));
}
html[data-theme="dark"] .wo-legend { background: color-mix(in oklab, var(--ink) 4%, var(--surface)) }

@media (max-width: 700px) {
  .acc-table.wo-table table, .acc-table.wo-table thead, .acc-table.wo-table tbody,
  .acc-table.wo-table tr, .acc-table.wo-table td { display: block; min-width: 0; width: auto }
  .acc-table.wo-table thead { display: none }
  .acc-table.wo-table .table-scroll { overflow: visible }
  .acc-table.wo-table tr {
    padding: 12px; margin: 0 0 10px; border: 1px solid var(--sf-hair, var(--line));
    border-radius: 14px; background: var(--surface);
  }
  .acc-table.wo-table tr:last-child { margin-bottom: 0 }
  .acc-table.wo-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border: 0;
  }
  .acc-table.wo-table td + td { border-top: 1px dashed var(--sf-hair, var(--line)) }
  .acc-table.wo-table td::before {
    content: attr(data-lbl); flex: none; color: var(--muted);
    font: 700 10.5px var(--font, Vazirmatn), sans-serif;
    font-size: calc(10.5px * var(--fz-base, 1));
  }
  .acc-table.wo-table td:empty { display: none }
  .acc-table.wo-table tr:hover td { background: transparent }
  .wo-state { justify-items: end; text-align: end }
  .wo-note { max-width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  .ct-social-row a.sf-soc, .mc-qty button, .wo-copy, .wo-cancel { transition: none }
  .ct-social-row a.sf-soc:hover { transform: none }
}