
.mc-scrim[hidden],
aside.mc[hidden] { display: none !important }

.mc-scrim {
  position: fixed; inset: 0; z-index: 78;
  background: transparent; backdrop-filter: none;
  opacity: 1; transition: opacity .2s ease;
}

aside.mc {
  position: fixed; inset: auto; translate: none;
  top: 0; bottom: auto;
  width: min(340px, calc(100vw - 20px));
  max-height: min(72vh, 540px);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 60px -24px rgba(10, 14, 22, .34), 0 3px 10px -4px rgba(10, 14, 22, .14);
  z-index: 79; overflow: hidden; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-9px);
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, .9, .3, 1), visibility .18s;
}
html[dir="rtl"] aside.mc { inset: auto; translate: none }
aside.mc.is-open { opacity: 1; visibility: visible; transform: none }

aside.mc::before {
  content: ""; position: absolute; top: -6px; left: var(--mc-caret, 26px);
  width: 11px; height: 11px; background: var(--surface);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
aside.mc.is-below::before { display: none }

aside.mc .mc-head { padding: 10px 12px; font-size: calc(12.5px * var(--fz-nav, 1)); border-bottom: 1px solid var(--line) }
aside.mc .mc-head b { font-size: calc(12.5px * var(--fz-nav, 1)); gap: 7px }
aside.mc .mc-n { min-width: 18px; height: 18px; font-size: calc(9.5px * var(--fz-badge, 1)); padding: 0 4px }
aside.mc .mc-x {
  width: 27px; height: 27px; border-radius: 9px; font-size: calc(16px * var(--fz-nav, 1)); border: 0; cursor: pointer;
  display: grid; place-items: center;
}
aside.mc .mc-x:hover { background: var(--line); color: var(--ink) }

aside.mc .mc-body { padding: 8px; gap: 6px; flex: 1 1 auto; min-height: 0 }
aside.mc .mc-line { grid-template-columns: 44px 1fr 24px; gap: 8px; padding: 7px; border-radius: 11px }
aside.mc .mc-thumb { width: 44px; height: 44px; border-radius: 8px }
aside.mc .mc-info { gap: 4px }
aside.mc .mc-name { font-size: calc(11.5px * var(--fz-badge, 1)); line-height: 1.55 }
aside.mc .mc-opt { font-size: calc(10px * var(--fz-nav, 1))}
aside.mc .mc-row { gap: 6px; margin-top: 1px }
aside.mc .mc-qty { border-radius: 8px }
aside.mc .mc-qty button { width: 23px; height: 23px; font-size: calc(13px * var(--fz-btn, 1)); border: 0; cursor: pointer }
aside.mc .mc-qty input { width: 27px; height: 23px; font-size: calc(11px * var(--fz-form, 1))}
aside.mc .mc-price { font-size: calc(11.5px * var(--fz-price, 1))}
aside.mc .mc-low { font-size: calc(9.5px * var(--fz-nav, 1))}
aside.mc .mc-del { width: 24px; height: 24px; border-radius: 7px; font-size: calc(12px * var(--fz-price, 1)); border: 0; cursor: pointer }
aside.mc .mc-del svg, aside.mc .mc-del .sf-i { width: 13px; height: 13px }

aside.mc .mc-foot { padding: 9px 11px calc(9px + env(safe-area-inset-bottom)); gap: 6px }
aside.mc .mc-sum { font-size: calc(11.5px * var(--fz-nav, 1))}
aside.mc .mc-sum b { font-size: calc(13.5px * var(--fz-nav, 1))}
aside.mc .mc-free { font-size: calc(10.5px * var(--fz-nav, 1)); padding: 6px 9px; border-radius: 9px }
aside.mc .mc-btn { padding: 9px; font-size: calc(12px * var(--fz-btn, 1)); border-radius: 10px }
aside.mc .mc-btns { display: flex; gap: 6px }
aside.mc .mc-btns .mc-btn { flex: 1 }
aside.mc .mc-empty { padding: 26px 14px; gap: 6px }
aside.mc .mc-empty .ic { font-size: calc(26px * var(--fz-icon, 1))}
aside.mc .mc-empty .ic svg, aside.mc .mc-empty .ic .sf-i { width: 30px; height: 30px }
aside.mc .mc-empty b { font-size: calc(12.5px * var(--fz-nav, 1))}
aside.mc .mc-empty p { font-size: calc(11px * var(--fz-nav, 1))}
aside.mc .mc-skel { gap: 6px }
aside.mc .mc-skel i { height: 58px; border-radius: 11px }

[data-mini-open].is-loading { opacity: .7 }

@media (max-width: 560px) {
  aside.mc {
    left: 10px !important; right: 10px !important; width: auto !important;
    top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    max-height: 74vh; transform: translateY(14px);
  }
  aside.mc.is-open { transform: none }
  aside.mc::before { display: none }
  .mc-scrim { background: rgba(10, 13, 20, .42) }
}
@media (prefers-reduced-motion: reduce) {
  aside.mc { transition: none }
}

footer.sf-foot {
  --sf-foot-ink:     var(--pl-footer-ink, var(--ink));
  --sf-foot-muted:   var(--pl-foot-muted, var(--muted));
  --sf-foot-line:    var(--pl-foot-line, var(--sf-line, var(--line)));
  --sf-foot-surface: var(--pl-foot-surface, var(--surface2));
  --sf-foot-accent:  var(--pl-foot-accent, var(--pl-primary, var(--green)));
  color: var(--sf-foot-ink);
}
footer.sf-foot h4,
footer.sf-foot h5,
footer.sf-foot .sf-foot-badge b { color: var(--sf-foot-ink) }
footer.sf-foot .sf-foot-links a,
footer.sf-foot .sf-foot-about p,
footer.sf-foot .sf-foot-contact,
footer.sf-foot .sf-foot-copy,
footer.sf-foot .sf-foot-copy a,
footer.sf-foot .sf-foot-badge,
footer.sf-foot .sf-foot-trust-title { color: var(--sf-foot-muted) }
footer.sf-foot .sf-foot-links a:hover,
footer.sf-foot .sf-foot-copy a:hover { color: var(--sf-foot-accent) }
footer.sf-foot .sf-foot-badge,
footer.sf-foot .sf-social a { background: var(--sf-foot-surface); border: 1px solid var(--sf-foot-line) }
footer.sf-foot .sf-social a { color: var(--sf-foot-ink) }
footer.sf-foot .sf-social a:hover { background: var(--sf-foot-accent); border-color: var(--sf-foot-accent); color: #fff }
footer.sf-foot .sf-news input {
  background: var(--sf-foot-surface); border: 1px solid var(--sf-foot-line); color: var(--sf-foot-ink);
}
footer.sf-foot .sf-news input::placeholder { color: var(--sf-foot-muted) }
footer.sf-foot .sf-foot-badges,
footer.sf-foot .sf-foot-copy,
footer.sf-foot .sf-trust-row { border-color: var(--sf-foot-line) }

footer.sf-foot .sf-trust-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
  gap: 24px; align-items: start;
  border-top: 1px solid var(--sf-foot-line);
}
footer.sf-foot .sf-trust-row.no-about { grid-template-columns: minmax(0, 1fr) }
footer.sf-foot .sf-trust-about { min-width: 0 }
footer.sf-foot .sf-trust-about h5 { color: var(--sf-foot-ink) }
footer.sf-foot .sf-trust-about h5::before { background: var(--sf-foot-accent) }
footer.sf-foot .sf-trust-about p {
  color: var(--sf-foot-muted); opacity: 1; font-size: calc(12px * var(--fz-foot, 1)); line-height: 2;
  overflow-wrap: anywhere;
}
footer.sf-foot .sf-trust-about p b,
footer.sf-foot .sf-trust-about p strong { color: var(--sf-foot-ink) }
footer.sf-foot .sf-trust-about p a { color: var(--sf-foot-accent) }
footer.sf-foot .sf-trust-more { color: var(--sf-foot-accent) }
footer.sf-foot .sf-trust-more:hover { text-decoration: underline }

footer.sf-foot .sf-trust-row .sf-foot-trust {
  width: auto; margin: 0; padding: 0; border: 0;
  justify-content: flex-start; align-items: flex-start; gap: 10px;
}
footer.sf-foot .sf-trust-row .sf-foot-trust .sf-foot-trust-title {
  order: -1; width: 100%; margin: 0 0 2px; text-align: start;
}
footer.sf-foot .sf-foot-logo {
  background: #f7f8fb; border: 1px solid rgba(255, 255, 255, .10);
  min-width: 92px; min-height: 92px; padding: 9px;
}
footer.sf-foot .sf-foot-logo.is-empty {
  background: transparent; border: 1px dashed var(--sf-foot-line); color: var(--sf-foot-muted);
}
footer.sf-foot .sf-foot-logo.is-empty b { color: var(--sf-foot-ink) }

@media (max-width: 820px) {
  footer.sf-foot .sf-trust-row { grid-template-columns: minmax(0, 1fr); gap: 18px }
}

.sf-pvideo { display: grid; gap: 9px; margin: 0; padding: 12px }
.sf-pvideo .sf-pvideo-title { display: flex; align-items: center; gap: 7px; font-size: calc(12.5px * var(--fz-base, 1)); font-weight: 800 }
.sf-pvideo .sf-pvideo-title svg, .sf-pvideo .sf-pvideo-title .sf-i { width: 15px; height: 15px; color: var(--pl-primary, var(--green)) }
.sf-pvideo-box {
  position: relative; width: 100%; aspect-ratio: var(--pv-ratio, 16 / 9);
  border-radius: 14px; overflow: hidden; background: #000; line-height: 0;
}
.sf-pvideo-box > iframe,
.sf-pvideo-box > video,
.sf-pvideo-box > embed,
.sf-pvideo-box > object {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: #000;
}
.sf-pvideo-box > video { object-fit: contain }
.sf-pvideo.is-portrait .sf-pvideo-box { --pv-ratio: 9 / 16; max-width: 300px; margin-inline: auto }
.sf-pvideo .sf-pvideo-link { justify-self: start }
@supports not (aspect-ratio: 16 / 9) {
  .sf-pvideo-box { height: 0; padding-top: 56.25% }
  .sf-pvideo.is-portrait .sf-pvideo-box { padding-top: 177% }
}
.sf-pvideo-note { font-size: calc(11px * var(--fz-base, 1)); color: var(--muted) }

.wg-video video, .wg-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0 }
