:root { --pl-title-scale: 1 }

.sf-page-head h1,
.sf-auth-head h1,
main > .wrap > h1,
.v9cart-bar h2,
.sec-head h2,
.wg .sec-head h2,
.prose h1 {
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.35;
  text-wrap: balance;
}
.sf-page-head h1 { font-size: calc(21px * var(--fz-h1, 1)); margin: 0 0 6px }
.sf-auth-head h1 { font-size: calc(18px * var(--fz-h1, 1))}
.sec-head h2, .wg .sec-head h2 { font-size: calc(19px * var(--fz-h2, 1))}
.v9cart-bar h2 { font-size: calc(17px * var(--fz-h2, 1))}
.prose h1 { font-size: calc(23px * var(--fz-prose, 1))}
.prose h2 { font-size: calc(18px * var(--fz-prose, 1)); font-weight: 800; letter-spacing: -.01em }
.prose h3 { font-size: calc(15.5px * var(--fz-prose, 1)); font-weight: 800 }

.sf-page-head { padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--sf-hair, var(--line)) }
.sf-page-head .eyebrow,
.sf-page-head .sub { font-size: calc(11.5px * var(--fz-h1, 1)); color: var(--muted); font-weight: 600 }
.sec-head h2 { position: relative; padding-inline-start: 12px }
.sec-head h2::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%;
  width: 4px; height: .82em; border-radius: 4px; background: var(--pl-primary, var(--green));
}
@media (max-width: 700px) {
  .sf-page-head h1 { font-size: calc(18px * var(--fz-h1, 1))}
  .sec-head h2, .wg .sec-head h2 { font-size: calc(16.5px * var(--fz-h2, 1))}
}

.pl-logo { display: inline-flex; align-items: center; line-height: 0 }
.pl-logo img { height: var(--pl-logo-h, 40px); width: auto; max-width: 220px; object-fit: contain; display: block }
.pl-logo .pl-logo-dark { display: none }
html[data-theme="dark"] .pl-logo .pl-logo-light { display: none }
html[data-theme="dark"] .pl-logo .pl-logo-dark { display: block }
.sf-brand.has-logo { gap: 10px }
.sf-brand.has-logo .sf-brand-mark { display: none }
.sf-brand-txt { display: flex; flex-direction: column; font-weight: 800; font-size: calc(13px * var(--fz-nav, 1)); line-height: 1.3 }
.sf-brand-txt small { font-weight: 500; font-size: calc(10.5px * var(--fz-nav, 1)); color: var(--muted) }
.sf-foot-brand.has-logo { margin: 0 0 12px }
.sf-foot-brand.has-logo .pl-logo img { max-width: 190px }
.sfdrawer-head .pl-logo img { height: 32px }
@media (max-width: 700px) { .pl-logo img { height: calc(var(--pl-logo-h, 40px) * .82); max-width: 150px } }

.sf-trust-row {
  display: grid; grid-template-columns: 1.35fr .95fr; gap: 22px; align-items: start;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sf-hair, var(--line));
}
.sf-trust-row.no-about { grid-template-columns: 1fr }
.sf-trust-about h5 {
  margin: 0 0 8px; font-size: calc(13.5px * var(--fz-h3, 1)); font-weight: 800;
  color: inherit; display: flex; align-items: center; gap: 7px;
}
.sf-trust-about h5::before {
  content: ""; width: 4px; height: 14px; border-radius: 4px; background: var(--pl-primary, var(--green));
}
.sf-trust-about p { margin: 0; font-size: calc(12px * var(--fz-base, 1)); line-height: 2.05; opacity: .82 }
.sf-trust-more {
  display: inline-block; margin-top: 9px; font-size: calc(11.5px * var(--fz-base, 1)); font-weight: 800;
  color: var(--pl-primary, var(--green));
}
.sf-trust-row .sf-foot-trust { margin: 0; padding: 0; border: 0 }
@media (max-width: 820px) {
  .sf-trust-row { grid-template-columns: 1fr; gap: 18px }
  .sf-trust-row .sf-foot-trust { justify-content: flex-start }
}

.wg-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--q-gap, 14px) }
.wg-quad.has-1 { grid-template-columns: 1fr }
.wg-quad.has-2 { grid-template-columns: repeat(2, 1fr) }
.wg-quad.has-3 { grid-template-columns: repeat(3, 1fr) }
.wg-quad .q-item {
  position: relative; display: block; border-radius: var(--q-r, 16px); overflow: hidden;
  background: var(--surface2); box-shadow: var(--sf-shadow-1);
}
.wg-quad .q-pic { display: block; width: 100%; overflow: hidden }
.wg-quad.is-ratio .q-pic { aspect-ratio: var(--q-ratio, 1 / 1) }
.wg-quad.is-fixed .q-pic { height: var(--q-h, 240px) }
.wg-quad .q-pic img {
  width: 100%; height: 100%; object-fit: var(--q-fit, cover); display: block;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.wg-quad.is-zoom .q-item:hover .q-pic img { transform: scale(1.06) }
.wg-quad.is-cap-over .q-cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 26px 13px 12px; color: #fff;
  font: 800 12.5px/1.5 var(--font, Vazirmatn), sans-serif;
  background: linear-gradient(to top, rgba(8,10,16,.78), rgba(8,10,16,0)); font-size: calc(12.5px * var(--fz-widget, 1))}
.wg-quad.is-cap-under .q-cap {
  display: block; padding: 9px 4px 2px; font: 700 12px/1.6 var(--font, Vazirmatn), sans-serif; color: var(--ink); font-size: calc(12px * var(--fz-widget, 1))}
.wg-quad.is-cap-under .q-item { background: transparent; box-shadow: none }
.wg-quad.is-cap-under .q-pic { border-radius: var(--q-r, 16px); box-shadow: var(--sf-shadow-1) }
.wg-quad-head p { margin: 4px 0 0; font-size: calc(12px * var(--fz-widget, 1)); color: var(--muted) }
@media (max-width: 900px) {
  .wg-quad.is-m-2 { grid-template-columns: repeat(2, 1fr) }
  .wg-quad.is-m-1 { grid-template-columns: 1fr }
  .wg-quad.is-m-scroll {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .wg-quad.is-m-scroll .q-item { flex: 0 0 68%; scroll-snap-align: start }
  .wg-quad.is-m-scroll::-webkit-scrollbar { height: 4px }
}

.mc-scrim {
  position: fixed; inset: 0; background: rgba(10,13,20,.5); backdrop-filter: blur(2px);
  z-index: 70; opacity: 0; transition: opacity .25s;
}
.mc-scrim.on { opacity: 1 }
.mc {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(400px, 92vw);
  background: var(--surface); color: var(--ink); z-index: 71; display: flex; flex-direction: column;
  box-shadow: var(--sf-shadow-3); translate: -102% 0; transition: translate .3s cubic-bezier(.16,1,.3,1);
}
html[dir="rtl"] .mc { inset-inline-start: auto; inset-inline-end: 0; translate: 102% 0 }
.mc.on { translate: 0 0 }
.mc-head {
  display: flex; align-items: center; gap: 10px; padding: 15px 17px;
  border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fz-nav, 1));
}
.mc-head b { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fz-nav, 1))}
.mc-n {
  background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff);
  min-width: 21px; height: 21px; border-radius: 20px; display: grid; place-items: center;
  font-size: calc(10.5px * var(--fz-badge, 1)); font-weight: 800; padding: 0 5px;
}
.mc-x {
  margin-inline-start: auto; width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface2); color: var(--muted); font-size: calc(19px * var(--fz-nav, 1)); line-height: 1;
}
.mc-body { flex: 1; overflow-y: auto; padding: 12px 13px; display: grid; gap: 10px; align-content: start }
.mc-line {
  display: grid; grid-template-columns: 62px 1fr 30px; gap: 11px; align-items: start;
  padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.mc-line.is-busy { opacity: .5; pointer-events: none }
.mc-thumb { display: block; width: 62px; height: 62px; border-radius: 11px; overflow: hidden; background: var(--surface2) }
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.mc-info { min-width: 0; display: grid; gap: 6px }
.mc-name { font: 700 12.5px/1.6 inherit; color: var(--ink); font-size: calc(12.5px * var(--fz-badge, 1))}
.mc-opt { font-size: calc(10.5px * var(--fz-nav, 1)); color: var(--muted) }
.mc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px }
.mc-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--surface2);
}
.mc-qty button { width: 28px; height: 28px; background: transparent; color: var(--ink); font-size: calc(15px * var(--fz-btn, 1)); font-weight: 800 }
.mc-qty button:hover { background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff) }
.mc-qty input {
  width: 34px; height: 28px; border: 0; background: transparent; text-align: center;
  font: 800 12px inherit; color: var(--ink); outline: 0; font-size: calc(12px * var(--fz-form, 1))}
.mc-price { font-size: calc(12.5px * var(--fz-price, 1)); font-weight: 800; white-space: nowrap }
.mc-low { font-size: calc(10px * var(--fz-nav, 1)); font-weight: 700; color: var(--pl-warn, var(--gold)) }
.mc-del { width: 30px; height: 30px; border-radius: 9px; background: transparent; color: var(--muted); font-size: calc(14px * var(--fz-price, 1))}
.mc-del:hover { background: color-mix(in srgb, var(--pl-danger, #d8332f) 14%, transparent); color: var(--pl-danger, #d8332f) }
.mc-foot { padding: 14px 15px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 9px }
.mc-sum { display: flex; align-items: center; justify-content: space-between; font-size: calc(12.5px * var(--fz-nav, 1))}
.mc-sum b { font-size: calc(15px * var(--fz-nav, 1)); font-weight: 900 }
.mc-free {
  font-size: calc(11px * var(--fz-nav, 1)); font-weight: 700; padding: 8px 10px; border-radius: 10px;
  background: var(--v9-tint, var(--surface2)); color: var(--ink);
}
.mc-btn {
  display: block; text-align: center; padding: 12px; border-radius: 12px;
  font-size: calc(13px * var(--fz-btn, 1)); font-weight: 800;
}
.mc-btn.primary { background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff) }
.mc-btn.primary:hover { background: var(--pl-primary-hover, var(--green2)) }
.mc-btn.ghost { background: var(--surface2); color: var(--ink) }
.mc-empty { text-align: center; padding: 40px 16px; display: grid; gap: 8px; justify-items: center }
.mc-empty .ic { font-size: calc(38px * var(--fz-icon, 1))}
.mc-empty b { font-size: calc(14px * var(--fz-nav, 1))}
.mc-empty p { margin: 0; font-size: calc(12px * var(--fz-nav, 1)); color: var(--muted) }
.mc-skel { display: grid; gap: 10px }
.mc-skel i {
  display: block; height: 84px; border-radius: 14px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--line) 37%, var(--surface2) 63%);
  background-size: 400% 100%; animation: mcsk 1.3s infinite;
}
@keyframes mcsk { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
.sf-act.cart .n.is-zero { display: none }
.sf-bottomnav .n.is-zero { display: none }

.jdate-input { min-width: 122px; text-align: center; font-variant-numeric: tabular-nums }
.jdp {
  position: absolute; z-index: 90; width: 268px; padding: 11px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 50px -18px rgba(10,14,22,.32);
  font: 500 12px/1.6 var(--font, Vazirmatn), sans-serif; color: var(--ink); direction: rtl; font-size: calc(12px * var(--fz-base, 1))}
.jdp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 9px }
.jdp-head b { flex: 1; text-align: center; font-size: calc(12.5px * var(--fz-base, 1)); font-weight: 800 }
.jdp-head button {
  width: 27px; height: 27px; border-radius: 8px; background: var(--surface2);
  color: var(--ink); font-size: calc(13px * var(--fz-btn, 1)); font-weight: 800;
}
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px }
.jdp-grid span { text-align: center; font-size: calc(9.5px * var(--fz-base, 1)); font-weight: 800; color: var(--muted); padding: 3px 0 }
.jdp-grid button {
  height: 30px; border-radius: 8px; background: transparent; color: var(--ink);
  font-size: calc(11.5px * var(--fz-btn, 1)); font-weight: 700;
}
.jdp-grid button:hover { background: var(--surface2) }
.jdp-grid button.on { background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff) }
.jdp-grid button.today { box-shadow: inset 0 0 0 1px var(--pl-primary, var(--green)) }
.jdp-grid button:disabled { opacity: .28; pointer-events: none }
.jdp-foot { display: flex; gap: 6px; margin-top: 9px }
.jdp-foot button {
  flex: 1; padding: 7px; border-radius: 9px; background: var(--surface2);
  color: var(--ink); font-size: calc(11px * var(--fz-btn, 1)); font-weight: 800;
}