:root { --pl-fs: 1; --pl-base: 15px }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { font-size: calc(15px * var(--fz-base, 1))}

h1 { font-size: calc(clamp(28px, 5vw, 40px) * var(--fz-h1, 1))}
.sec-head h2, .wg .sec-head h2 { font-size: calc(19px * var(--fz-h2, 1))}
.sf-page-head h1 { font-size: calc(21px * var(--fz-h1, 1))}
.prose h1 { font-size: calc(23px * var(--fz-prose, 1))}
.prose h2 { font-size: calc(18px * var(--fz-prose, 1))}
.prose h3 { font-size: calc(15.5px * var(--fz-prose, 1))}
h3, .box h3 { font-size: calc(15px * var(--fz-h3, 1))}

.btn, .btn:link, .btn:visited,
.btn.full, .sfbtn:not(.ghost):not(.light):not(.outline),
.step.done .step-num, .pager .on, .v9chip.on,
.sf-bottomnav .n, .sf-act .n, .mc-n, .mc-btn.primary,
.wg-dots button.on, .sf-tag.is-primary, .brand .mark, .sf-brand-mark {
  color: var(--pl-on-primary, #fff);
}
.btn:hover { color: var(--pl-on-primary, #fff) }
.btn.outline, .btn.ghost, .btn.light { color: var(--ink) }
.product-visual { color: var(--pl-on-primary, #fff) }
.wg-timer b { background: var(--pl-ink, var(--ink)); color: var(--pl-bg, var(--bg)) }
.price, .sf-price b, .v9price b, .wg-rank-txt i, .wg-deal2-price i, .wg-pcol-txt i { color: var(--pl-price, var(--green)) }
.sf-badge.off, .sf-off, .off-badge { background: var(--pl-sale, var(--red)); color: var(--pl-on-sale, #fff) }
.alert.success, .flash.success { color: var(--pl-success, var(--green)) }
.alert.warning, .flash.warning { color: var(--pl-warn, var(--gold)) }
.alert.error, .flash.error { color: var(--pl-danger, var(--red)) }
.prose a, main a.link, .box a[style*="green"] { color: var(--pl-primary, var(--green)) !important }

aside.mc { width: min(376px, calc(100vw - 20px)) }
aside.mc .mc-line { grid-template-columns: 48px 1fr 26px; gap: 9px }
aside.mc .mc-thumb { width: 48px; height: 48px }
aside.mc .mc-row { flex-wrap: wrap; row-gap: 6px }

.mc-qty, aside.mc .mc-qty {
  display: inline-flex !important; visibility: visible !important; opacity: 1 !important;
  align-items: center; flex: none; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 9px;
}
.mc-qty button, aside.mc .mc-qty button {
  display: grid !important; place-items: center; width: 27px; height: 27px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 900 15px/1 var(--font, Vazirmatn), sans-serif; color: var(--ink); font-size: calc(15px * var(--fz-btn, 1))}
.mc-qty button:hover, aside.mc .mc-qty button:hover {
  background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff);
}
.mc-qty button:disabled { opacity: .4; cursor: default }
.mc-qty input, aside.mc .mc-qty input {
  width: 34px; height: 27px; border: 0; border-inline: 1px solid var(--line);
  background: var(--surface); text-align: center; outline: 0;
  font: 800 12px var(--font, Vazirmatn), sans-serif; color: var(--ink);
  font-variant-numeric: tabular-nums; font-size: calc(12px * var(--fz-form, 1))}
aside.mc .mc-price { margin-inline-start: auto; font-weight: 900 }

.wg-rank-item { isolation: isolate; padding-top: 12px }
.wg-rank-n {
  position: absolute; top: 8px; inset-inline-start: 8px; inset-inline-end: auto;
  z-index: 4; min-width: 25px; height: 25px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 9px;
  font: 900 12.5px/1 var(--font, Vazirmatn), sans-serif; letter-spacing: 0;
  background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff);
  box-shadow: 0 4px 12px -6px rgba(10, 14, 22, .45);
  font-variant-numeric: tabular-nums; font-size: calc(12.5px * var(--fz-badge, 1))}
.wg-rank-item.is-top .wg-rank-n {
  background-image: linear-gradient(135deg, var(--pl-accent, var(--gold)), #b8801a);
  color: #1b1305;
}
.wg-rank.is-list .wg-rank-item { grid-template-columns: 34px 62px 1fr; padding: 10px }
.wg-rank.is-list .wg-rank-n {
  position: static; width: 34px; height: 34px; min-width: 34px; font-size: calc(14px * var(--fz-badge, 1));
  border-radius: 11px; justify-self: center; align-self: center;
}
.wg-rank.is-rail .wg-rank-item { padding-top: 12px }
@media (max-width: 700px) { .wg-rank.is-list .wg-rank-item { grid-template-columns: 30px 54px 1fr } }

.wg-deal2-head { --dl-ink: #fff; --dl-soft: rgba(255, 255, 255, .82); --dl-chip: rgba(255, 255, 255, .22); --dl-chip-ink: #fff; --dl-chip-line: rgba(255, 255, 255, .3) }
.wg-deal2.is-accent .wg-deal2-head { --dl-ink: var(--pl-on-primary, #fff); --dl-soft: color-mix(in srgb, var(--pl-on-primary, #fff) 80%, transparent); --dl-chip-ink: var(--pl-on-primary, #fff); --dl-chip: color-mix(in srgb, var(--pl-on-primary, #fff) 20%, transparent); --dl-chip-line: color-mix(in srgb, var(--pl-on-primary, #fff) 30%, transparent) }
.wg-deal2.is-gold .wg-deal2-head { --dl-ink: #1a1206; --dl-soft: rgba(26, 18, 6, .78); --dl-chip: rgba(255, 255, 255, .55); --dl-chip-ink: #1a1206; --dl-chip-line: rgba(26, 18, 6, .18) }
.wg-deal2.is-dark .wg-deal2-head, .wg-deal2.is-sale .wg-deal2-head { --dl-ink: #fff; --dl-chip-ink: #fff }

.wg-deal2-head, .wg-deal2-ttl h2, .wg-deal2-ttl > div > h2 { color: var(--dl-ink) }
.wg-deal2-ttl h2 { color: var(--dl-ink) !important }
.wg-deal2-ttl span { color: var(--dl-soft) !important; opacity: 1 }
.wg-deal2-ttl .ic { background: var(--dl-chip); border-color: var(--dl-chip-line); color: var(--dl-ink) }
.wg-deal2-timer b, .wg-deal2 .wg-timer b {
  background: var(--dl-chip) !important; color: var(--dl-chip-ink) !important;
  border: 1px solid var(--dl-chip-line); min-width: 32px;
}
.wg-deal2-timer i, .wg-deal2 .wg-timer i { color: var(--dl-soft) !important; opacity: 1 }
.wg-deal2-timer { gap: 4px }
.wg-deal2-btn { background: var(--dl-ink); color: var(--pl-ink, #131a26) }
.wg-deal2.is-gold .wg-deal2-btn { background: #1a1206; color: #fff }
.wg-deal2.is-gold .wg-deal2-btn:hover { background: #33240c }
@media (max-width: 560px) {
  .wg-deal2-head { gap: 10px }
  .wg-deal2-timer { margin-inline-start: 0; width: 100%; justify-content: space-between }
}

.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.co-grid .co-w-full { grid-column: 1 / -1 }
@media (max-width: 620px) { .co-grid { grid-template-columns: minmax(0, 1fr) } }
.co-f label { display: block; margin-bottom: 6px; font-weight: 700 }
.co-req { color: var(--pl-danger, var(--red)); font-style: normal }
.co-hint { display: block; margin-top: 5px; font-size: calc(10.5px * var(--fz-form, 1)); font-weight: 700; color: var(--muted) }
.co-hint.is-bad { color: var(--pl-danger, var(--red)) }
.co-hint.is-ok { color: var(--pl-success, var(--green)) }
.co-f input, .co-f textarea, .co-f select { width: 100% }