/* ==========================================================================
   VStore Ecosystem — Storefront (قالب مشتری)
   رنگی گرم، ترکیب خلاقانه: کرم گرم + گرادیان برند + لهجهٔ مکمل
   ========================================================================== */

/* ---------------- نوار تبلیغ + هدر ---------------- */
.vf-promo {
  background: var(--grad-sidebar);
  color: #fbefe6;
  font-size: var(--fs-13);
}
.vf-promo__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}
.vf-promo__in span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.vf-promo__in b {
  color: var(--brand-2);
  font-family: var(--font-num);
}
.vf-promo__note {
  opacity: 0.66;
}
.vf-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.vf-header__in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  flex-wrap: wrap;
}
.vf-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.vf-brand__mark {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--brand) 34%, transparent));
}
.vf-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.vf-brand__text b {
  font-size: var(--fs-16);
}
.vf-brand__text em {
  font-size: var(--fs-11);
  font-style: normal;
  color: var(--ink-3);
}
.vf-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: var(--sp-2);
}
.vf-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.vf-nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.vf-nav a.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}
.vf-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  padding: 0.25rem 0.35rem 0.25rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
}
.vf-search input {
  flex: 1;
  border: 0;
  background: transparent;
  min-height: 36px;
  font-size: var(--fs-13);
}
.vf-search input:focus {
  outline: none;
}
.vf-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
}
.vf-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.vf-iconbtn:hover {
  color: var(--brand);
  border-color: var(--brand-line);
  transform: translateY(-1px);
}
.vf-count {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: var(--brand-ink);
  font-size: var(--fs-11);
  font-style: normal;
  font-family: var(--font-num);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.vf-mobile {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  place-items: center;
}
@media (max-width: 1080px) {
  .vf-search {
    order: 5;
    max-width: none;
  }
}
@media (max-width: 900px) {
  .vf-mobile {
    display: grid;
    margin-inline-start: auto;
  }
  .vf-nav {
    display: none;
    order: 6;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .vf-nav.is-open {
    display: flex;
  }
  .vf-actions .vp-btn--outline {
    display: none;
  }
}

/* ---------------- بلوک‌ها ---------------- */
.vf-block {
  padding-block: var(--sp-12);
}
.vf-block--band {
  background: var(--grad-band);
  border-block: 1px solid var(--line);
}
.vf-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.vf-section__head h2 {
  margin-bottom: var(--sp-1);
}
/*
 * برچسب «اسلات الزامی» (`vf-slot__tag`) اینجا نیست: فقط در حالت پیش‌نمایش
 * ویرایشگر چاپ می‌شود، پس جایش `editor.css` است که تنها همان‌جا بار می‌شود.
 */

/* ---------------- هیرو ---------------- */
.vf-block--hero {
  padding-block: 0;
}
.vf-hero {
  position: relative;
}
.vf-hero__viewport {
  position: relative;
  min-height: 460px;
}
.vf-hero__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-8);
  padding-block: var(--sp-12);
  background: var(--grad-hero);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
  overflow: hidden;
}
.vf-hero__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.vf-hero__slide.is-dark {
  background: var(--grad-sidebar);
  color: #fbefe6;
}
.vf-hero__slide.is-dark .vf-hero__sub,
.vf-hero__slide.is-dark .vf-hero__facts {
  color: rgba(251, 239, 230, 0.8);
}
.vf-hero__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow), var(--glow-2);
  pointer-events: none;
}
.vf-hero__in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.vf-hero__title {
  max-width: 22ch;
}
.vf-hero__sub {
  max-width: 46ch;
}
.vf-hero__facts {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-13);
  color: var(--ink-2);
  margin-block-start: var(--sp-2);
}
.vf-hero__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.vf-hero__art {
  position: relative;
  min-height: 300px;
}
.vf-hero__card,
.vf-hero__ghost {
  position: absolute;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 6px solid var(--surface);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.vf-hero__card {
  inset-inline-start: 4%;
  top: 0;
  width: 78%;
  transform: rotate(-3deg);
  z-index: 2;
}
.vf-hero__ghost {
  inset-inline-end: 0;
  bottom: -18px;
  width: 52%;
  transform: rotate(5deg);
  opacity: 0.92;
  z-index: 1;
}
.vf-hero__dots {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-start: var(--sp-5);
  display: flex;
  gap: var(--sp-2);
  z-index: 3;
}
.vf-hero__dots button {
  width: 26px;
  height: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.vf-hero__dots button.is-active {
  background: var(--grad-brand);
  width: 44px;
}
.vf-hero__strip {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .vf-hero__slide {
    grid-template-columns: 1fr;
    position: absolute;
  }
  .vf-hero__art {
    display: none;
  }
}

/* ---------------- محصولات ---------------- */
.vf-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 1100px) {
  .vf-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .vf-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .vf-products {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vf-product__media {
  display: block;
  position: relative;
}
.vf-product__badges {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  z-index: 2;
}
.vf-product__quick {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline: var(--sp-3);
  padding: 0.45rem;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  color: #fff;
  font-size: var(--fs-12);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--dur) var(--ease);
  backdrop-filter: blur(4px);
}
.vf-product:hover .vf-product__quick {
  opacity: 1;
  transform: none;
}
.vf-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}
.vf-product__title {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.6;
}
.vf-product__title a:hover {
  color: var(--brand);
}
.vf-product__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.vf-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.vf-product__rate {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vf-star {
  color: var(--line-strong);
  font-size: var(--fs-13);
}
.vf-star.is-on {
  color: var(--brand-2);
}

/* ---------------- مزیت‌ها / دسته‌ها ---------------- */
.vf-benefits,
.vf-quotes,
.vf-cats,
.vf-stats {
  display: grid;
  gap: var(--sp-4);
}
.vf-benefits.cols-3,
.vf-quotes.cols-3,
.vf-cats.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-benefits.cols-4,
.vf-cats.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vf-quotes.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-cats.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vf-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .vf-benefits.cols-4,
  .vf-cats.cols-4,
  .vf-cats.cols-6,
  .vf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vf-benefits.cols-3,
  .vf-quotes.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .vf-benefits.cols-3,
  .vf-benefits.cols-4,
  .vf-quotes.cols-3,
  .vf-quotes.cols-2,
  .vf-cats.cols-4,
  .vf-cats.cols-6,
  .vf-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  animation: vf-rise var(--dur-slow) var(--ease) backwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes vf-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.vf-benefit__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-leaf);
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-line);
}
.vf-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
}
.vf-cat__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-blob);
}
.vf-cat b {
  font-size: var(--fs-14);
}
.vf-stat {
  position: relative;
  text-align: center;
}
.vf-stat__spark {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-4);
  font-size: var(--fs-12);
  color: var(--brand);
  font-family: var(--font-num);
}

/* ---------------- بنر ---------------- */
.vf-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-10);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.vf-banner.is-brand {
  background: var(--grad-brand);
  color: var(--brand-ink);
}
.vf-banner.is-brand .vp-badge {
  background: color-mix(in oklab, #fff 24%, transparent);
  color: #fff;
}
.vf-banner.is-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.vf-banner.is-plain {
  background: var(--grad-band);
  border: 1px solid var(--line);
}
.vf-banner h2 {
  margin-block: var(--sp-2);
}
.vf-banner p {
  max-width: 52ch;
  opacity: 0.92;
}
.vf-banner.is-brand .vp-btn--primary {
  background: #fff;
  color: var(--brand);
}
.vf-banner.is-accent .vp-btn--primary {
  background: #fff;
  color: var(--accent);
}
.vf-banner::after {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -6%;
  width: 240px;
  height: 240px;
  border-radius: var(--r-blob);
  background: color-mix(in oklab, #fff 22%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

/* ---------------- نظرات / وبلاگ / خبرنامه ---------------- */
.vf-quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.vf-quote__mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-leaf);
  background: var(--brand-soft);
  color: var(--brand);
}
.vf-quote blockquote {
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}
.vf-quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: auto;
}
.vf-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.vf-quote figcaption span {
  display: flex;
  flex-direction: column;
}
.vf-quote figcaption em {
  font-style: normal;
}
.vf-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 900px) {
  .vf-posts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-post {
  display: flex;
  flex-direction: column;
}
.vf-post__media {
  display: block;
  aspect-ratio: 16 / 9;
}
.vf-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.vf-post__body b {
  font-size: var(--fs-15);
}
.vf-faq {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) {
  .vf-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-faq__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}
.vf-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.vf-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.vf-faq__list details,
.vf-faq__item {
  padding: 0;
  overflow: hidden;
}
.vf-faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.vf-faq__list summary::-webkit-details-marker {
  display: none;
}
.vf-faq__list details[open] summary {
  color: var(--brand);
  background: var(--brand-soft);
}
.vf-faq__list details[open] summary svg {
  transform: rotate(180deg);
}
.vf-faq__a {
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink-2);
  font-size: var(--fs-14);
  border-top: 1px solid var(--line);
}
.vf-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--grad-band);
  flex-wrap: wrap;
}
.vf-news__form {
  display: flex;
  gap: var(--sp-2);
  flex: 1;
  min-width: 280px;
  max-width: 460px;
}

/* ---------------- فوتر ---------------- */
.vf-footer {
  margin-block-start: var(--sp-12);
  background: var(--grad-sidebar);
  color: #fbefe6;
  padding-block: var(--sp-12) var(--sp-6);
}
.vf-footer a {
  color: rgba(251, 239, 230, 0.78);
}
.vf-footer a:hover {
  color: var(--brand-2);
}
.vf-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-8);
}
@media (max-width: 900px) {
  .vf-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.vf-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-14);
}
.vf-footer__col b {
  color: #fff;
  margin-bottom: var(--sp-1);
}
.vf-brand--foot .vf-brand__text em {
  color: rgba(251, 239, 230, 0.6);
}
.vf-trust {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--sp-2);
}
.vf-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-4);
  border-top: 1px solid rgba(251, 239, 230, 0.16);
  flex-wrap: wrap;
}
.vf-footer__bottom .vp-tiny {
  color: rgba(251, 239, 230, 0.6);
}

/* ---------------- سبد کشویی ---------------- */
.vf-mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.vf-mini__thumb {
  width: 56px;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: none;
}
.vf-mini__thumb svg {
  width: 100%;
  height: 100%;
}
.vf-mini b {
  display: block;
  font-size: var(--fs-13);
}
.vf-mini em {
  font-style: normal;
}

/* ---------------- گالری و باکس خرید تک‌محصول ---------------- */
.vf-slot {
  display: grid;
  gap: var(--sp-6);
}
.vf-gal {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.vf-gal__main {
  grid-column: 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 340px;
  /* برچسب و شمارنده روی خود قاب می‌نشینند، پس قاب مرجع موقعیت آن‌هاست. */
  position: relative;
}
.vf-gal__badge {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
}
.vf-gal__counter {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: #fbefe6;
}
.vf-gal__thumbs {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vf-gal__thumb {
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  aspect-ratio: 4/3;
}
.vf-gal__thumb.is-active {
  border-color: var(--brand);
  box-shadow: var(--shadow-glow);
}
.vf-gal__notes {
  grid-column: 2;
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.vf-gal__notes span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ok);
}
@media (max-width: 700px) {
  .vf-gal {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-gal__main,
  .vf-gal__notes {
    grid-column: 1;
  }
  .vf-gal__thumbs {
    grid-row: auto;
    flex-direction: row;
    overflow-x: auto;
  }
  .vf-gal__thumb {
    min-width: 78px;
  }
}
.vf-buy__note {
  margin: 0;
  color: var(--ink-3);
}
.vf-buy {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
/* خاموش‌کردن چسبندگی از پنل: کلید «باکس هنگام اسکرول بچسبد». */
.vf-buy.is-static {
  position: static;
  top: auto;
}
.vf-buy__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vf-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-13);
}
.vf-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-bottom: 1px dashed var(--line);
}
.vf-specs span {
  color: var(--ink-3);
}
.vf-buy__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.vf-buy__trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--ink-2);
  border-top: 1px dashed var(--line);
  padding-block-start: var(--sp-3);
}
.vf-buy__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------------- فروشگاه: فیلترها ---------------- */
.vf-shop {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .vf-shop {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.vf-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.vf-filters__group > b {
  font-size: var(--fs-13);
}
.vf-shop__toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.vf-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 1100px) {
  .vf-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .vf-shop__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-price-range {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.vf-price-range input[type='range'] {
  width: 100%;
  accent-color: var(--brand);
}

/* ---------------- سبد و تسویه ---------------- */
.vf-cart {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .vf-cart {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-cart__row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px dashed var(--line);
}
.vf-cart__row:last-child {
  border-bottom: 0;
}
.vf-cart__thumb {
  width: 88px;
  height: 66px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.vf-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.vf-qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--surface-2);
  cursor: pointer;
  font-family: var(--font-num);
}
.vf-qty span {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-num);
}
.vf-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.vf-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-14);
  color: var(--ink-2);
}
.vf-summary__row.is-total {
  font-size: var(--fs-18);
  color: var(--ink);
  font-weight: 700;
  border-top: 1px solid var(--line);
  padding-block-start: var(--sp-3);
}
.vf-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.vf-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.vf-step.is-done {
  color: var(--ok);
}
.vf-step.is-active {
  color: var(--brand);
  font-weight: 700;
}
.vf-step__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  font-family: var(--font-num);
  font-size: var(--fs-12);
}
.vf-step.is-active .vf-step__dot {
  background: var(--grad-brand);
  color: var(--brand-ink);
}
.vf-step.is-done .vf-step__dot {
  background: var(--ok);
  color: #fff;
}

/* ---------------- درگاه و دانلود ---------------- */
.vf-gateway,
.vf-download {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.vf-gateway__mock {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.vf-gateway__head {
  padding: var(--sp-5);
  background: #ffd400;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.vf-download__token {
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-13);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
}
.vf-download__count {
  display: flex;
  gap: var(--sp-2);
}
.vf-download__count i {
  flex: 1;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.vf-download__count i.is-on {
  background: var(--grad-brand);
}

/* ---------------- پنل مشتری / ورود ---------------- */
.vf-account {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .vf-account {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-account__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.vf-account__side a {
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  color: var(--ink-2);
}
.vf-account__side a:hover {
  background: var(--surface-2);
}
.vf-account__side a.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}
.vf-auth {
  max-width: 470px;
  margin-inline: auto;
}
.vf-auth__switch {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.vf-auth__switch button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.5rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.vf-auth__switch button.is-active {
  background: var(--surface);
  color: var(--brand);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.vf-page-head {
  padding-block: var(--sp-6);
}
.vf-empty-mini {
  padding: var(--sp-8);
}
.vf-contact {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--sp-6);
}
@media (max-width: 900px) {
  .vf-contact {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-article {
  max-width: 760px;
  margin-inline: auto;
}
.vf-article h2 {
  margin-block: var(--sp-6) var(--sp-3);
}
.vf-article p {
  margin-block-end: var(--sp-4);
}
.vf-gates {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.vf-gate {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-13);
}

/*
 * نوار و حالت اشکال‌زدایی چیدمان (`vf-devbar` / `vf-devmode`) اینجا نیست.
 *
 * آن دو فقط در پروتاپ دمو معنا دارند و هیچ صفحه‌ای از سایت واقعی‌شان را
 * نمی‌سازد؛ پس به `prototype/assets/css/dev.css` رفتند تا استایل تولیدی
 * باری بی‌دلیل با خودش حمل نکند. (بودجهٔ CSS قالب کانال 10 سند.)
 */

/* ---------------- شبکهٔ اسلات‌های تک‌محصول ---------------- */
.vf-prod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 0 var(--sp-6);
  align-items: start;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  padding-block: var(--sp-8);
}
@media (max-width: 1000px) {
  .vf-prod-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vf-prod-grid .vf-block {
  padding-block: var(--sp-4);
}
.vf-prod-grid .vf-block .vp-container {
  padding-inline: 0;
}
.vf-prod-tabs {
  margin-block-start: var(--sp-6);
}
.vf-review {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  align-items: start;
}
.vf-review p {
  font-size: var(--fs-14);
  color: var(--ink-2);
}
.vf-map {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 220px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: var(--fs-13);
  gap: var(--sp-2);
}
.vf-side-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.vf-dl-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.vf-dl-row.is-done {
  opacity: 0.72;
}
.vf-skeleton-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- منوی وردپرس (wp_nav_menu) ----------
   قالب دو جایگاه منو دارد: «منوی اصلی سایت» در هدر و «منوی راهنمای فوتر» در فوتر.
   وردپرس خروجی را در `<ul>` می‌ریزد، پس همان تخت‌بودن لینک‌های پروتایپ باید برای
   این دو فهرست هم برقرار شود: نخستین کاری که مدیر سایت می‌کند ساختن منو است و
   بدون این قواعد، هدر و ستون «راهنما»ی فوتر به فهرست گلوله‌دار بدل می‌شوند.
   حالت فعال هم دو نام دارد: `is-active` (نوار بدون منو) و `current-menu-item`
   (خروجی خود وردپرس) — هر دو یک ظاهر دارند. */
.vf-nav__menu,
.vf-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vf-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.vf-nav__menu li,
.vf-nav__menu li > a {
  display: inline-flex;
  align-items: center;
}
.vf-nav__menu .current-menu-item > a,
.vf-nav__menu .current_page_item > a,
.vf-nav__menu .current-menu-ancestor > a,
.vf-nav__menu .current-menu-parent > a {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}
.vf-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ==========================================================================
   لایهٔ موبایل — فروشگاه
   --------------------------------------------------------------------------
   چرا یک بلوک جدا در انتهای فایل؟ چون قواعد بالاتر مرجع تأییدشده‌اند و
   بازنویسی‌شان بی‌دلیل است. این لایه فقط جایی دخالت می‌کند که چیدمان دسکتاپ در
   عرض 320–700 پیکسل می‌شکند: هدر باریک، ستون‌های چسبان، ردیف سبد، پنل فیلترها،
   مشخصات محصول و ستون‌های فوتر.
   ========================================================================== */

/* 1 — ستون‌های چسبان.
   `position: sticky` روی موبایل یعنی «محتوای زیرش را بپوشان»: پنل فیلترها و باکس
   خرید عرض کامل می‌گیرند و در اسکرول روی شبکهٔ محصولات/محتوای بعدی می‌خوابند. */
@media (max-width: 900px) {
  .vf-filters,
  .vf-buy,
  .vf-summary {
    position: static;
  }
}

/* 2 — هدر در عرض باریک.
   سه کار با هم: تگلاین برند جمع می‌شود، فاصله‌ها کم می‌شوند و هدف‌های لمسی
   کوچک‌تر — تا برند + دکمهٔ منو + سه عمل سمت چپ در یک خط جا شوند (360px). */
@media (max-width: 620px) {
  .vf-brand__text em {
    display: none;
  }
  .vf-search {
    min-width: 0;
    max-width: none;
  }
  .vf-nav {
    gap: var(--sp-2);
    padding-block-end: var(--sp-2);
    border-top: 1px solid var(--line);
  }
  .vf-nav__menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .vf-nav__menu a,
  .vf-nav a {
    display: flex;
    padding-block: 0.7rem;
  }
}
@media (max-width: 480px) {
  .vf-header__in {
    gap: var(--sp-2);
  }
  .vf-actions {
    gap: 0.25rem;
  }
  .vf-mobile,
  .vf-iconbtn {
    width: 38px;
    height: 38px;
  }
  .vf-actions .vp-btn--icon {
    width: 34px;
    min-height: 34px;
  }
}

/* 3 — پنل فیلترهای فروشگاه: تاشو روی موبایل.
   دکمه فقط زیر 900px دیده می‌شود. کلاس `has-js` را اسکریپت پیش از رنگ‌آمیزی
   می‌گذارد، پس با جاوااسکریپت خاموش پنل فیلترها مثل قبل باز و کامل می‌ماند و
   هیچ فیلتری از دست نمی‌رود. */
.vf-filters__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sp-2);
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}
.vf-filters__toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: var(--ink-3);
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}
.vf-filters__toggle[aria-expanded='true']::after {
  transform: rotate(45deg);
}
@media (max-width: 900px) {
  .vf-filters__toggle {
    display: inline-flex;
  }
  .has-js .vf-filters:not(.is-open) {
    display: none;
  }
  .has-js .vf-filters.is-open {
    margin-block-start: var(--sp-3);
  }
}

/* 4 — ردیف سبد خرید.
   در چهار ستون دسکتاپ، تصویر + عنوان + تعداد + قیمت کنار هم می‌نشینند؛ در عرض
   360px همین چهار ستون فقط 130px برای عنوان می‌گذارند. پس اینجا ردیف دو سطری
   می‌شود: تصویر و عنوان بالا، کنترل تعداد و قیمت پایین. ستون اول 104px است چون
   کندل تعداد 102px عرض دارد؛ با 76px از ستون بیرون می‌زد. جای هر فرزند با
   `nth-child` تعیین می‌شود تا مارک‌آپ تمپلیت دست‌نخورده بماند (ترتیب فرزندها:
   تصویر، بدنهٔ عنوان، کندل تعداد، قیمت). */
@media (max-width: 700px) {
  .vf-cart__row {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    row-gap: var(--sp-3);
    column-gap: var(--sp-3);
  }
  .vf-cart__row > *:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .vf-cart__row > *:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .vf-cart__row > *:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .vf-cart__row > *:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .vf-cart__thumb {
    width: 76px;
    height: 60px;
  }
}

/* نشانهٔ «در حال اعمال» فرم فیلترها.
   تغییر هر فیلد فرم را خودکار می‌فرستد؛ این حالت فقط می‌گوید درخواست رفته است،
   تا کاربر تکراری کلیک نکند. */
.vf-filters.is-busy,
.vf-shop__toolbar form.is-busy {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

/* 5 — مرتب‌سازی و نوار ابزار فروشگاه: انتخابگر تمام‌عرض می‌شود تا زیر 620px
   با برچسب «مرتب‌سازی» در دو خط نشکند. */
.vf-sort {
  min-height: 40px;
  min-width: 190px;
}
@media (max-width: 620px) {
  .vf-sort {
    width: 100%;
    min-width: 0;
  }
  .vf-shop__toolbar > * {
    width: 100%;
  }
  .vf-shop__toolbar label {
    width: 100%;
  }
}

/* 6 — مشخصات محصول و ستون‌های فوتر: در عرض باریک یک‌ستونی می‌شوند تا برچسب و
   مقدار در دو خط جدا نیفتند. */
@media (max-width: 620px) {
  .vf-specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .vf-steps {
    gap: var(--sp-2);
  }
}

/* 7 — جدول‌های راهنما (سفارش‌ها، دانلودها): عرض کم را با اسکرول افقی رد می‌کنند،
   ولی ارتفاع ردیف لمسی باشد. */
@media (max-width: 700px) {
  .vp-table th,
  .vp-table td {
    padding: 0.7rem 0.75rem;
  }
  .vp-pagination button {
    min-width: 42px;
    height: 42px;
  }
}

/* 8 — ردیف نظر خریدار: سه ستون دارد (46px آواتار · متن · ستاره‌ها) و روی صفحهٔ
   360 پیکسلی ستون ستاره‌ها جای متن را می‌خورد. زیر 620 پیکسل ستاره‌ها به سطر
   خودشان می‌روند. این شکاف را `node build/tools/check-mobile.js` پیدا کرد. */
@media (max-width: 620px) {
  .vf-review {
    grid-template-columns: 36px 1fr;
  }
  .vf-review > :last-child {
    grid-column: 1 / -1;
  }
}

/* 9 — بخش‌های تازه و ستون‌بندی واریانت‌ها.
   چرا این بلوک ته فایل است؟ چون قاعدهٔ ستون‌بندی باید **بعد از** قاعدهٔ پایه
   بیاید: `.vf-products` پیش‌تر چهارستونی و بی‌قید تعریف شده و همان گزینشگر با
   `.cols-2` باید بعدتر بنشیند تا برد کند. اگر به بالای فایل منتقل شود، واریانت‌های
   ستون‌بندی بی‌صدا بی‌اثر می‌شوند. */
.vf-products.cols-1 {
  grid-template-columns: minmax(0, 1fr);
}
.vf-products.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-products.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-products.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vf-benefits.cols-2,
.vf-cats.cols-2,
.vf-posts.cols-2,
.vf-stats.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-stats.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-cats.cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.vf-products.cols-1,
.vf-products.cols-2 {
  gap: var(--sp-4);
}

/* متن‌محورها: عرض قابل خواندن، تراز انتخابی مدیر. */
.vf-text-box {
  max-width: 74ch;
  line-height: var(--lh-loose);
}
.vf-text-box.is-center {
  margin-inline: auto;
  text-align: center;
}
.vf-text-box.is-start {
  text-align: start;
}
.vf-text-box.is-card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* عکس تکی و گالری تصاویر. */
.vf-media {
  margin: 0;
}
.vf-media img,
.vf-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.vf-media figcaption,
.vf-gallery__item figcaption {
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs-13);
}
.vf-media.is-wide img,
.vf-media.is-rounded img {
  border-radius: var(--r-xl);
}
.vf-gallery {
  display: grid;
  gap: var(--sp-4);
}
.vf-gallery.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-gallery.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-gallery.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vf-gallery__item {
  margin: 0;
}

/* باکس متن و عکس (دو ستونی، با جابجایی). */
.vf-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: center;
}
/* واریانت «is-end» جای عکس و متن را عوض می‌کند. چرا با `order` و نه `direction`؟
   چون شبکه در سند راست‌به‌چپ خودش ستون اول را سمت راست می‌چیند و ستون دوم را چپ؛
   پس عکس (که در DOM اول است) به‌طور پیش‌فرض سمت راست می‌نشیند و همین «img-start»
   است. برای عکس‌سمت‌چپ کافی است همان عنصر به ترتیب دوم برود. `direction` کل
   تراز متن داخل باکس را هم برمی‌گرداند و متن را فارسی‌خوان‌نما می‌کند. */
.vf-split.is-end .vf-split__media {
  order: 2;
}
.vf-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}
.vf-split__body .vp-h2 {
  margin-block-end: var(--sp-3);
}
.vf-split__body .vp-lead {
  margin-block-end: var(--sp-3);
}
.vf-points {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  padding: 0;
  list-style: none;
}
.vf-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-2);
}
.vf-points svg {
  color: var(--brand);
}

/* باکس تماس، فرم، برندها، استوری، جداکننده. */
.vf-contact {
  display: grid;
  gap: var(--sp-4);
}
.vf-contact.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.vf-contact__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vf-contact__list li {
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: var(--sp-2);
}
.vf-contact__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
}
.vf-form {
  display: grid;
  gap: var(--sp-4);
}
.vf-form.is-narrow {
  max-width: 620px;
}
.vf-form__row {
  display: grid;
  gap: 6px;
}
.vf-brands {
  display: grid;
  gap: var(--sp-4);
}
.vf-brands.cols-4,
.vf-brands.cols-6,
.vf-brands.cols-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vf-brandbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 84px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  text-align: center;
}
.vf-brandbox img {
  max-height: 42px;
  width: auto;
}
.vf-story {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
.vf-story.is-compact {
  gap: var(--sp-4);
}
.vf-story__head {
  color: var(--ink-2);
  font-size: var(--fs-13);
}
.vf-story__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  color: inherit;
  font-size: var(--fs-12);
  text-align: center;
}
.vf-story__item img,
.vf-story__item .vf-avatar {
  width: 62px;
  height: 62px;
  border-radius: var(--r-pill);
  border: 2px solid var(--brand-line);
  object-fit: cover;
}
.vf-divider {
  height: 1px;
  background: var(--line);
}
.vf-divider.is-space {
  height: var(--sp-8);
  background: none;
}
.vf-divider.is-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  color: var(--brand);
  background: none;
}

/* پیشنهاد ویژه: کاشی تبلیغاتی + شبکهٔ محصولات. */
.vf-special {
  display: grid;
  gap: var(--sp-5);
}
.vf-special.is-tile {
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: start;
}
.vf-special__tile {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  color: var(--brand-ink);
}
.vf-special__timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  font-size: var(--fs-13);
}

/* بنرهای کوچک چندستونی. */
.vf-banners {
  display: grid;
  gap: var(--sp-4);
}
.vf-banners.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-banners.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-banners.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vf-bannerbox {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  color: inherit;
  text-align: center;
}
.vf-bannerbox img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.vf-banner__media img {
  max-width: 220px;
  border-radius: var(--r-md);
}

/* سبک‌های واریانتی که روی شبکهٔ اصلی می‌نشینند. */
.vf-benefits.is-plain .vf-benefit,
.vf-quotes.is-plain .vf-quote {
  background: transparent;
  box-shadow: none;
}
.vf-cats.is-compact .vf-cat {
  padding: var(--sp-3);
}
.vf-cats.is-tile .vf-cat {
  background: var(--surface-2);
}
.vf-quotes.is-slider {
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.vf-quotes.is-slider .vf-quote {
  scroll-snap-align: start;
}
.vf-posts.is-list {
  grid-template-columns: minmax(0, 1fr);
}
.vf-news.is-inline,
.vf-news.is-card {
  display: block;
}
.vf-faq.is-intro {
  max-width: 900px;
}
.vf-products.is-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .vf-products.cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vf-cats.cols-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .vf-special.is-tile {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .vf-products.cols-3,
  .vf-products.cols-5,
  .vf-gallery.cols-4,
  .vf-banners.cols-3,
  .vf-banners.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vf-cats.cols-8,
  .vf-brands.cols-6,
  .vf-brands.cols-8 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vf-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-contact.is-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .vf-products.cols-2,
  .vf-products.cols-3,
  .vf-products.cols-5,
  .vf-benefits.cols-2,
  .vf-cats.cols-2,
  .vf-cats.cols-8,
  .vf-posts.cols-2,
  .vf-stats.cols-2,
  .vf-stats.cols-3,
  .vf-gallery.cols-2,
  .vf-gallery.cols-3,
  .vf-gallery.cols-4,
  .vf-brands.cols-4,
  .vf-brands.cols-6,
  .vf-brands.cols-8,
  .vf-banners.cols-2,
  .vf-banners.cols-3,
  .vf-banners.cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-story {
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   ناحیه‌های بخشی: هدر و فوتر

   این بخش تازه است و فقط وقتی کاری می‌کند که مدیر هدر/فوتر را «بخشی» ساخته و
   منتشر کرده باشد؛ تا آن‌وقت مارک‌آپ ثابت قالب بالا رندر می‌شود و ظاهر سایت
   یک‌دانه تغییر نمی‌کند.

   قاعدهٔ مهم: بلاک‌های کروم هیچ ظرف دور و بری نمی‌گیرند. اگر هر نوار در یک
   <div> بستهٔ خودش بپیچد، «position: sticky» هدر بی‌اثر می‌شود (چون عنصر چسبان
   فقط تا انتهای جعبهٔ پدرش بالا می‌ماند، و پدری که به‌اندازهٔ خود هدر ارتفاع
   دارد یعنی صفر پیمایش). پس خودِ نوار، ریشه است و کلاس‌های ظاهری روی خودش
   می‌نشینند.
   ========================================================================== */

.vf-zone__item {
  display: block;
}

/* هدر چسبان پیش‌فرض است (مثل امروز)؛ خاموش‌کردنش از پنل همان‌جا دیده می‌شود. */
.vf-header.is-static {
  position: static;
}

.vf-promo.is-cream {
  background: var(--surface-2);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.vf-promo.is-cream .vf-promo__cta {
  color: var(--brand);
}

.vf-promo.is-dark {
  background: var(--ink);
  color: #fbefe6;
}

/* دکمهٔ نوار اعلان و دکمهٔ بستنش، هر دو قرص‌شکل و هم‌رنگ متن‌اند. */
.vf-promo__cta,
.vf-promo__x {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: inherit;
}

.vf-promo__cta {
  gap: var(--sp-1);
  padding: 4px 10px;
  background: color-mix(in srgb, #fff 16%, transparent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.vf-promo__cta:hover {
  background: color-mix(in srgb, #fff 26%, transparent);
}

.vf-promo__x {
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  background: color-mix(in srgb, #fff 14%, transparent);
  cursor: pointer;
}

/*
 * کنترل‌های تازهٔ گالری تک‌محصول: نسبت قاب و پس‌زمینهٔ آن.
 *
 * کلاس `is-ratio-*` فقط وقتی می‌نشیند که مدیر نسبت را از «ثابت» عوض کرده باشد،
 * پس ظاهر پیش‌فرض دست‌نخورده می‌ماند.
 */
.vf-gal.is-ratio-square .vf-gal__main {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.vf-gal.is-ratio-4-3 .vf-gal__main {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.vf-gal.is-ratio-16-9 .vf-gal__main {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.vf-gal.is-tone-cream .vf-gal__main {
  background: var(--surface-2);
}

.vf-gal.is-tone-dark .vf-gal__main {
  background: var(--ink);
}

/*
 * نوار پایانی فوتر یک بلاک جداست، پس پس‌زمینه و فاصله‌هایش را خودش می‌آورد.
 * در مارک‌آپ ثابت، همین نوار داخل <footer class="vf-footer"> بود و رنگ را
 * ارث می‌برد؛ حالا که جدا شده، همان رنگ تیره را صریح می‌گیرد.
 */
.vf-footer__bar {
  background: var(--grad-sidebar);
  color: #fbefe6;
  padding-block: var(--sp-4) var(--sp-6);
}

.vf-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* پیوندهای این نوار (از جمله پیوندهای همین ردیف) همان رنگ فوتر تیره را دارند. */
.vf-footer__bar a {
  color: rgba(251, 239, 230, 0.78);
}

.vf-footer__bar a:hover {
  color: var(--brand-2);
}

.vf-footer__bar .vf-footer__bottom {
  margin-block-start: 0;
  padding-block-start: var(--sp-3);
}

@media (max-width: 620px) {
  .vf-promo__in {
    justify-content: center;
    text-align: center;
  }

  .vf-promo__note {
    inline-size: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   ظاهرهای جایگزین بخش‌ها (واریانت‌ها)

   رندرر روی ریشهٔ هر بلاک یک کلاس `vf-el--v-<کلید>` می‌گذارد. تا پیش از این هیچ
   قاعده‌ای برایشان نبود؛ یعنی مدیر «باکس جمع‌وجور» را انتخاب می‌کرد، ذخیره هم
   می‌شد، و روی سایت **هیچ چیزی** عوض نمی‌شد — یک انتخاب کاملاً بی‌اثر.

   قاعدهٔ بازبینی `auditVariants` همین را می‌سنجد: هر واریانتی که راهنمای چیدمان
   ندارد (`columns`/`style`) باید در همین فایل یک قاعده با همین پیشوند داشته باشد.
   کلید `default` استثناست: خط پایهٔ همان دیزاین است و چیزی برای عوض‌کردن ندارد.
   ========================================================================== */

/* ---- گالری محصول: چسبان و تمام‌عرض ---- */
.vf-el--v-stacked .vf-gal__main {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.vf-el--v-wide .vf-gal {
  grid-template-columns: minmax(0, 1fr);
}
.vf-el--v-wide .vf-gal__main {
  grid-column: 1;
  min-height: 520px;
  border-radius: var(--r-md);
}
.vf-el--v-wide .vf-gal__thumbs {
  grid-row: 2;
  grid-column: 1;
  flex-direction: row;
}

/* ---- باکس خرید: جمع‌وجور و برجسته ---- */
.vf-el--v-compact .vf-buy,
.vf-buy.is-compact {
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.vf-el--v-compact .vf-buy__price,
.vf-buy.is-compact .vf-buy__price {
  padding: var(--sp-3);
}
.vf-el--v-compact .vf-buy__head .vp-h2,
.vf-buy.is-compact .vf-buy__head .vp-h2 {
  font-size: var(--fs-20);
}
.vf-el--v-highlight .vf-buy,
.vf-buy.is-highlight {
  background: var(--brand-soft);
  border: 2px solid var(--brand);
  box-shadow: 0 26px 60px -34px color-mix(in oklab, var(--brand) 70%, transparent);
}
.vf-el--v-highlight .vf-buy__price,
.vf-buy.is-highlight .vf-buy__price {
  background: var(--surface);
}
.vf-el--v-highlight .vf-buy__price .vp-price {
  font-size: var(--fs-30);
}

/* ---- پرسش‌های محصول: آکاردئون یا فهرست ساده ---- */
.vf-el--v-plain .vf-faq.is-product,
.vf-faq.is-product.is-plain {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.vf-el--v-plain .vf-faq.is-product .vf-faq__side,
.vf-faq.is-product.is-plain .vf-faq__side {
  position: static;
}
.vf-el--v-plain .vf-faq__item,
.vf-faq.is-plain .vf-faq__item {
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  background: transparent;
}

/* ---- هدر: وسط‌چین و کمینه ---- */
.vf-el--v-centered .vf-header__in {
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}
.vf-el--v-centered .vf-nav {
  justify-content: center;
}
.vf-el--v-minimal .vf-header__in {
  min-height: 56px;
  gap: var(--sp-2);
}
.vf-el--v-minimal .vf-brand__text em {
  display: none;
}

/* ---- اسلایدر رسانه: هیرو و حالت‌های تصویری ---- */
.vf-el--v-slide-1 .vf-hero__slide {
  grid-template-columns: minmax(0, 1fr);
  min-height: 380px;
  padding-block: var(--sp-8);
}
.vf-el--v-slide-1 .vf-hero__ghost {
  display: none;
}
.vf-el--v-slide-2 .vf-hero__ghost {
  inset-inline-end: var(--sp-2);
  opacity: 0.7;
}
.vf-el--v-slide-3 .vf-hero__slide {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  padding-block: var(--sp-7);
}
.vf-el--v-slide-3 .vf-hero__art,
.vf-el--v-slide-3 .vf-hero__facts {
  display: none;
}
.vf-el--v-slide-4 .vf-hero__viewport {
  min-height: 300px;
}
.vf-el--v-slide-4 .vf-hero__slide {
  min-height: 300px;
  padding-block: var(--sp-6);
}
.vf-el--v-slide-4 .vf-hero__facts {
  display: none;
}

/* ---- نوار اعلان: اعلان با دکمهٔ برجسته ---- */
.vf-el--v-cta .vf-promo__note {
  display: none;
}
.vf-el--v-cta .vf-promo__cta {
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--brand-ink);
}

/* ---- نوار پایانی فوتر: وسط‌چین ---- */
.vf-el--v-centered .vf-footer__bottom {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
}

@media (max-width: 900px) {
  .vf-el--v-wide .vf-gal__main {
    min-height: 320px;
  }

  .vf-el--v-stacked .vf-gal__main {
    position: static;
    top: auto;
  }
}