@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
/* ==========================================================================
   VPStarShop Base Styles V1.0 (Bootstrap compatible)
   Author: Yaqub + GapGPT
   Description: Global variables, color system, typography, themes, resets.
   ========================================================================== */

/* 1. RESET & STANDARD NORMALIZE
---------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
    max-width: 100%;

}

html {
  line-height: 1.15;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Estedad", "Vazirmatn", sans-serif;  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background 0.3s ease, color 0.3s ease;
  direction: rtl;
}
html, body {
  overflow-x: hidden !important;
}

/* Remove list, link, and image defaults */
ul, ol {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit;}
img {max-width: 100%; height: auto; display: block;}
button, input, select, textarea {font: inherit; border: none; outline: none; background: none;}
button {cursor: pointer;}

/* 2. VARIABLES: COLOR SYSTEM
---------------------------------------------- */
:root {
  /* Primary Palette */
  --primary: #4DA3FF;
  --primary-hover: #70B7FF;
  --accent: #FFB347;
  --accent-hover: #ffc46f;

  /* Base Shades */
  --black: #000000;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* Theme Colors */
  --color-bg: #ffffff;
  --color-text: #070b12;
  --color-card: rgba(255,255,255,0.8);

  /* Borders & Shadows */
  --border-radius: 0.5rem;
  --border-color: rgba(255,255,255,0.15);
  --shadow-glass: 0 4px 24px rgba(0,0,0,0.15);

     /* Layer Index System (for organization) */
  --z-base: 1;
  --z-header: 1600;
  --z-nav: 1500;
  --z-overlay: 1400;
  --z-modal: 1200;
  --z-tooltip: 1300;

  /* ─────────── Color System ─────────── */
  --on-surface: #1b1b1b;      /* متن یا خطوط روی سطح روشن */
  --on-surface-dark: #f3f3f3; /* متن روی سطوح تیره */

    --blue-deep: #003B9C;
  --blue-neon: #00A8FF;
  --aqua-glow: #0ABEAD;
  --white-glass: rgba(255,255,255,0.15);
  --text-light: rgb(205, 180, 29);
  --blur-val: 20px;

  /* Font Sizes (Root-based for scalability) */
  --font-main: "Estedad", "Vazirmatn", sans-serif;
  --font-display: "Estedad", "Vazirmatn", sans-serif; /* برای تیترها */
  --font-body: "Estedad", "Vazirmatn", sans-serif;   /* برای متن‌ها */

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-xxl: 1.5rem;


  /* Spacing System (keep root-based like Bootstrap) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

    /* Breakpoints */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition: all 0.35s ease;
}

/* 3. DARK THEME VARIABLES
---------------------------------------------- */
:root[data-theme='dark'] {
  --color-bg: #070b12;
  --color-card: rgba(18, 26, 38, 0.7);
  --color-text: #e2e8f0;
  --border-color: rgba(77, 163, 255, 0.15);
  --shadow-glass: 0 4px 40px rgba(77, 163, 255, 0.08);
}

/* 4. GRID SYSTEM COMPATIBLE WITH BOOTSTRAP
---------------------------------------------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-3);
  max-width: 1320px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--space-3));
}
.col {
  flex: 1 0 0%;
  padding-inline: var(--space-3);
}

/* Responsive Columns Similar to Bootstrap */
@media (min-width: 576px) {
  .col-sm-1 { width: 8.333%; }
  .col-sm-2 { width: 16.666%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.333%; }
  .col-sm-5 { width: 41.666%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.333%; }
  .col-sm-8 { width: 66.666%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.333%; }
  .col-sm-11 { width: 91.666%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) { /* md - tablets */
  [class*="col-md-"] { flex: 0 0 auto; }
  .col-md-6 { width: 50%; }
}

@media (min-width: 992px) { /* lg - laptops */
  [class*="col-lg-"] { flex: 0 0 auto; }
  .col-lg-4 { width: 33.333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) { /* xl - desktops */
  [class*="col-xl-"] { flex: 0 0 auto; }
  .col-xl-3 { width: 25%; }
  .col-xl-6 { width: 50%; }
}

@media (min-width: 1400px) { /* xxl - large monitors */
  [class*="col-xxl-"] { flex: 0 0 auto; }
  .col-xxl-3 { width: 25%; }
  .col-xxl-4 { width: 33.333%; }
  .col-xxl-6 { width: 50%; }
}
/* 5. UTILITIES
---------------------------------------------- */
.text-center {text-align: center;}
.text-end {text-align: right;}
.text-start {text-align: left;}

.d-flex {display: flex;}
.align-center {align-items: center;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.gap-1 {gap: var(--space-1);}
.gap-2 {gap: var(--space-2);}
.gap-3 {gap: var(--space-3);}

/* اطمینان از محدود ماندن سکشن‌های اصلی در کانتینر */
section,
.container,
.wrapper,
.main-content {
  max-width: 100%;
  overflow-x: clip; /* جدیدتر و تمیزتر از hidden */
  box-sizing: border-box;
}

/* 6. BASIC THEMING HELPERS
---------------------------------------------- */
.theme-toggle {
  position: fixed;
  bottom: 1.2rem;
  left: 1.2rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glass);
  transition: var(--transition);
}
.theme-toggle:hover {
  background: var(--primary-hover);
}
/* 7. TYPOGRAPHY SCALE
---------------------------------------------- */
h1, h2, h3, h4, h5, h6, p {
  margin-block: 0 0.75rem;
  font-family: "Estedad", sans-serif;
  line-height: 1.4;
  color: var(--color-text);
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

p {
  font-size: var(--font-md);
  color: var(--color-text);
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
p, span, li, a, button, input { font-family: var(--font-body); }

small { font-size: var(--font-sm); color: var(--gray-600); }
/* 8. SCROLLBAR (MODERN)
---------------------------------------------- */
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 6px;
}

/* ───────────── VPStarShop Header ───────────── */
.vp-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-header, 1600);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

[data-theme="dark"] .vp-nav {
  background: rgba(16, 21, 30, 0.78);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* Container اصلی ناو */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
}

/* ───────────── Logo ───────────── */
.nav__logo a {
  font-family: "Poppins", "Vazirmatn", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: var(--primary, #4DA3FF);
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.nav__logo a:hover {
  color: var(--accent, #FFB347);
}

.nav__logo {
  margin: -10px;
  padding: 0;
  line-height: 0; /* ارتفاع اضافی تگ h1 حذف میشه */
}

.nav__logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-link { display: inline-flex; align-items: center; }
.logo-svg {
  height: 82px;
  width: auto;
}


/* ───────────── Menu ───────────── */
.menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item a.menu__link {
  text-decoration: none;
  color: var(--on-surface, #1b1b1b);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: color 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .menu__item a.menu__link {
  color: #f3f3f3;
}

.menu__item a.menu__link:hover {
  background-color: rgba(77, 163, 255, 0.1);
  color: var(--primary);
}

/* فرم جستجو در منو */
.menu__item form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--primary);
  border-radius: 6px;
  overflow: hidden;
}

[data-theme="dark"] .menu__item form {
  background: rgba(25, 35, 50, 0.55);
}

.menu__item input[type="text"] {
  border: none;
  outline: none;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  color: inherit;
  background: transparent;
  width: 180px;
}

.menu__item input[type="submit"] {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.3s ease;
}

.menu__item input[type="submit"]:hover {
  background: var(--accent);
}

/* آیتم فعال */
.menu__item--active > a,
.menu__item--active > form {
  color: var(--primary);
}

/* ───────────── Hamburger Icon ───────────── */
.nav__toggle-icon {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.nav__toggle-line {
  width: 100%;
  height: 2px;
  background: var(--on-surface, #222);
  border-radius: 1px;
  transition: all 0.3s ease;
}

[data-theme="dark"] .nav__toggle-line {
  background: #eaeaea;
}

/* حالت منوی باز */
.menu.active {
  transform: translateX(0);
}
/* ───────────── Overlay تاریک ───────────── */
.nav__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay, 1400);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.nav__overlay.active {
  display: block;
  opacity: 1;
}

/* مخفی کردن خطوط Toggle وقتی منو باز است */
.menu.active ~ .nav__toggle-icon .nav__toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.menu.active ~ .nav__toggle-icon .nav__toggle-line:nth-child(2) {
  opacity: 0;
}
.menu.active ~ .nav__toggle-icon .nav__toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/*======================================
   VPSTARSHOP — HOMEPAGE MASTER STYLE
   Base Layout + Section Styling
======================================*/

.hero {
  position: relative;
  min-height: 60vh;
  background: linear-gradient(120deg, rgba(57, 57, 67, 0.4), rgba(31, 31, 37, 0.4)),
              url("../images/andy-spark-m9r4LrAOw64-unsplash.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* تاری کمتر و اشباع کمتر برای وضوح طبیعی‌تر */
  backdrop-filter: blur(6px) saturate(130%);
  /* رنگ روشن‌تر و شفاف‌تر برای عبور بهتر تصویر */
  background: rgba(189, 169, 169, 0.35);
}
.hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
}
.hero__title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  margin-bottom: .6rem;
  text-shadow: 0 4px 30px rgba(16, 16, 16, 0.45);
}
.hero__subtitle {
  font-weight: 300;
  margin-bottom: 1.4rem;
  font-size: 2rem;
  opacity: .9;
}
.hero__cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent,#FFB347), var(--primary,#4DA3FF));
  padding: .8rem 1.6rem;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.hero__cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}

/*===== Section Basics =====*/
.featured {
  position: relative;
  padding: 80px 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.03)
    );
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  margin-top: 60px;
  margin-bottom: 60px;
}

/* خط نور بالای نوار برای حس 3D */
.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(77, 163, 255, 0.25),
    transparent 70%
  );
  pointer-events: none;
}

section {
  margin-block: 4rem;
}

.section-head {
  text-align: center;
  margin-bottom: 2rem;
}
.section-head__title {
  font-family: "Estedad", "Vazirmatn", sans-serif;
  font-size: 2.4rem;
  letter-spacing: -0.3px;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(77, 163, 255, 0.45);
}
.section-head__caption {
  font-size: .95rem;
  color: rgba(255,255,255,0.72);
}

/*===== Shared Glassy Box =====*/
.glass-box,
.glass-section {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 2rem;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

/*===== Featured grid =====*/
.featured__grid, .category-grid, .api-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

/*===== Category highlight =====*/
.categories-highlight .category-grid article {
  background: rgba(193, 105, 105, 0.8);
  backdrop-filter: blur(12px);
  padding: 1.4rem;
  border-radius: 12px;
  text-align: center;
  color: #434242;
  transition: all .3s ease;
}
.categories-highlight .category-grid article:hover {
  transform: translateY(-6px);
  background: rgba(193, 80, 80, 0.8);
}

/*===== Horizontal Gallery =====*/
.gallery-horizontal {
  position: relative;
  width: 90%;             /* ← عرض کلی کمتر از حالت full */
  margin: 0 auto;         /* وسط‌چین کردن کل سکشن */
  padding: 2rem 0;
  overflow: hidden;
}

/* خط تزئینی مخفی در اطراف برای حس شیشه فریم‌شده */
.gallery-horizontal::before,
.gallery-horizontal::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 50px;
  pointer-events: none;
}

/* اسکرول افقی */
.scrollbar-gallery {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* مخفی کردن scrollbar در موبایل */
.scrollbar-gallery::-webkit-scrollbar {
  height: 6px;
}
.scrollbar-gallery::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-gallery::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
}

/*===== Magazine =====*/
.magazine {
  position: relative;
  padding: 80px 0;
  margin: 70px auto;
  border-radius: 24px;
  max-width: 1100px;
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.02)
    );
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
  text-align: center;
  overflow: hidden;
}

/* نور گوشه بالا سمت چپ برای حس تجملی */
.magazine::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 70%;
  height: 30%;
  background: radial-gradient(circle at center,
        rgba(77, 163, 255, 0.5),
        transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* بخش تیتر */
.magazine .section-head {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.magazine .section-head__title {
  font-family: "Estedad", "Vazirmatn", sans-serif;
  font-size: 2.3rem;
  color: var(--primary, #4DA3FF);
  text-shadow: 0 0 10px rgba(77, 163, 255, 0.4);
}

.magazine .section-head__caption {
  font-size: 1.1rem;
  color: rgb(4, 50, 80);
  margin-top: 10px;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}

/* محتوای مقالات */
.magazine__articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
  color: var(--primary, #4DA3FF);
  padding: 0 1rem;
  z-index: 2;
  position: relative;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}

/* کارت مقاله (فرض برای آینده، وقتی محتوای dynamic بیاد) */
.magazine__card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: left;
  transition: all .3s ease;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.magazine__card:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(77,163,255,0.35);
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(77,163,255,0.2);
}

/* تیتر و توضیح مقاله */
.magazine__card h4 {
  font-family: "Estedad", "Vazirmatn", sans-serif;
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.magazine__card p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
    font-family: "Estedad", "Vazirmatn", sans-serif;

}


/*===== API Placeholder Section =====*/
.vp-api .api-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 1.4rem;
  text-align: center;
  color: #fff;
  transition: all .3s ease;
}
.vp-api .api-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.api-placeholder {
  display: inline-block;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--accent,#ffb347);
}

/*===== Lottery Section =====*/
.lottery .glass-box {
  text-align: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(15px);
  padding: 2rem 1.5rem;
}
.lottery h3 {
  color: #ffb347;
  margin-bottom: 1rem;
}
.lottery p {
  color: rgb(177, 159, 48);
  margin-bottom: 1.4rem;
}
.app-btn--orange {
  background: linear-gradient(135deg,#FF8C42,#FF4F38);
  color: #fff;
  text-decoration: none;
  padding: .7rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  transition: 0.3s;
}
.app-btn--orange:hover {
  filter: brightness(1.15);
  transform: translateY(-3px);
}

/*===== Mega Sales =====*/
.mega-sales .section-head__title {
  text-align: center;
  margin-bottom: 1.2rem;
}

/*===== Popular & Bestseller =====*/
.popular-bestsell .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.popular-bestsell .col-md-6 {
  flex: 1 1 48%;
  min-width: 320px;
}
.featured .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

.product-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  transition: all 0.35s ease;
  transform-style: preserve-3d;
  perspective: 900px;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.25);
}

.product-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.5s ease;
}

.product-card:hover img {
  transform: scale(1.07) rotate3d(1, 1, 0, 6deg);
}

.product-card h5 {
  font-size: 1rem;
  color: #cab2b2;
  margin: 0.9rem 0 0.3rem;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.product-card .price {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--accent, #FFB347);
  background: linear-gradient(135deg, #FFD38E, #FFB347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
}

/* لینک‌ها */
.product-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

.cat-item {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.2rem 1.4rem;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

/* های‌لایت هنگام هاور */
.cat-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(77,163,255,0.7), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cat-item:hover::before {
  opacity: 1;
}

.cat-item:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* نام دسته */
.cat-item h5 {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  color: var(--accent, #FFB347);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 16px rgba(255, 179, 71, 0.3);
}

/* لینک محصول */
.cat-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1; /* لینک رو بیار روی pseudo-element */
}

.cat-item a:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(77,163,255,0.3);
}

/* رمانج جزئی برای اختلاف ظاهری */
.cat-item a::before {
  content: "👁‍";
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
  pointer-events: none; /* مهم‌ترین خط برای فعال شدن لینک */
}
.discounted-products {
  position: relative;
  padding: 80px 0;
  background: radial-gradient(circle at 30% 20%, rgba(243, 140, 140, 0.2), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(255,160,0,0.18), transparent 70%);
  overflow: hidden;
}

.discounted-products::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(255,80,40,0.05) 0%,
    rgba(255,200,120,0.05) 20%,
    rgba(255,255,255,0.05) 45%,
    rgba(200,60,0,0.05) 100%);
  backdrop-filter: blur(6px) saturate(160%);
  z-index: 0;
}

.discounted-products .section-head {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.discounted-products .section-head__title {
  font-size: 2.4rem;
  letter-spacing: -0.5px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff8800 0%, #ff4747 50%, #ffd000 100%);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 25px rgba(255,100,0,0.5);
}

.discounted-products .section-head__caption {
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
  margin-top: .4rem;
  text-shadow: 0 0 10px rgba(255,176,0,0.3);
}

/* 🔸 Grid */
.discount-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  justify-items: center;
}

/* 🔸 Card base */
.discount-card {
  position: relative;
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(14px) saturate(180%);
  overflow: hidden;
  transition: all .45s ease;
  width: 100%;
  height: 100%;
}

.discount-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 8px 42px rgba(255,130,60,0.45);
}
.discount-card.glassy {
  transform: scale(0.72);   /* کارت رو ۸٪ کوچک‌تر می‌کنه */
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* وقتی موس میره روش هنوز افکت بزرگ‌نمایی بمونه */
.discount-card.glassy:hover {
  transform: scale(0.80);
}

/* 🔸 Badge - درصد تخفیف */
.discount-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff0000, #ff7300);
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 0 0 0 12px;
  box-shadow: 0 0 15px rgba(255,120,40,0.7);
  font-size: 0.9rem;
}

/* 🔸 Image */
.discount-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.discount-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s ease;
}
.discount-card:hover .discount-thumb img {
  transform: scale(1.06);
}

/* 🔸 Info */
.discount-info {
  padding: 18px 16px 70px;
  text-align: center;
  color: #fff;
}
.discount-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  color: #9f9e9e;
}

.discount-prices {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: baseline;
}

.discount-prices .old-price {
  text-decoration: line-through;
  font-size: 0.95rem;
  color: rgba(103, 103, 103, 0.55);
}

.discount-prices .new-price {
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(90deg, #816c38, #7c4817);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(255,161,63,0.35);
}

/* 🔸 Buy Button */
.buy-now {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  background: linear-gradient(90deg,#ff6a00,#ff2e00);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 0;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255,100,20,0.45);
  transition: all 0.35s ease;
}

.buy-now:hover {
  background: linear-gradient(90deg,#ff9100,#ff3b00);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 0 32px rgba(255,130,40,0.75);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  margin-top: 1rem;
}
.horizontal-gallery {
  margin-top: 3rem;
  padding: 2rem 1rem 3rem;
  position: relative;
  overflow: hidden;
}

/* عنوان و کپشن */
.horizontal-gallery .section-head__title {
  color: #e8a7a7;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
  text-shadow: 0 3px 20px rgba(0,0,0,0.4);
}

.horizontal-gallery .section-head__caption {
  color: rgba(94, 90, 90, 0.6);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
}

.gallery-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

/* استایل اسکرول‌باز (برای مرورگرها) */
.gallery-scroll::-webkit-scrollbar {
  height: 8px;
}
.gallery-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}
.gallery-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg,var(--primary,#4DA3FF),var(--accent,#FFB347));
  border-radius: 10px;
}

/* آیتم‌های گالری */
.gallery-item {
  position: relative;
  flex: 0 0 280px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(160%);
  scroll-snap-align: start;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.gallery-item:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 45px rgba(0,0,0,0.4);
}

/* تصاویر */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.gallery-item:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: flex-end;
  border-radius: 0 0 18px 18px;
  transition: all 0.4s ease;
}
.gallery-item:hover .gallery-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1));
}

/* عنوان محصول */
.gallery-overlay h6 {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  margin: 0;
}

/* حالت خالی */
.empty-state {
  color: rgba(255,255,255,0.7);
  padding: 1.5rem 0;
  flex: 1;
  text-align: center;
  font-weight: 300;
  font-size: 1rem;
}
.popular-products {
  position: relative;
  padding: 2.5rem 1.5rem 3rem;
  background: transparent;
}

/* افکت نور پس‌زمینه */
.popular-products::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at 35% 40%, rgba(255, 179, 71, 0.5), transparent 70%);
  filter: blur(100px);
  opacity: 0.25;
  z-index: 0;
}
.section-head p{
  color: #224468;
}

.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.8rem;
  position: relative;
  z-index: 2;
}

/* کارت‌ها */
.product-card {
  position: relative;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  transition: all 0.35s ease;
  border: 1px solid rgba(255,255,255,0.09);
}

.product-card:hover {
  transform: translateY(-7px) scale(1.03);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.2);
}

/* تصویر */
.product-thumb {
  position: relative;
  height: 230px;
  overflow: hidden;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.product-card:hover .product-thumb img {
  transform: scale(1.1);
}

/* ستاره محبوبیت */
.product-card::before {
  content: "★";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 1.1rem;
  color: var(--accent,#FFB347);
  text-shadow: 0 0 12px rgba(255,179,71,0.8);
  opacity: 0.8;
}

/* اطلاعات */
.product-info {
  padding: 1.1rem 1.2rem 1.3rem;
  color: #251c1c;
  text-align: center;
}

.product-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transition: color .3s;
}
.product-card:hover .product-title {
  color: var(--accent,#FFB347);
}

/* آمار بازدید و قیمت */
.product-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  padding-top: .4rem;
}

.product-stats .views {
  color: rgba(62, 61, 61, 0.65);
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-stats .price {
  font-weight: 700;
  color: var(--primary,#4DA3FF);
  text-shadow: 0 0 12px rgba(77,163,255,0.4);
  transition: color 0.3s ease;
}
.product-card:hover .price {
  color: var(--accent,#FFB347);
}

/* حالت خالی */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
  font-size: 1rem;
  padding: 2rem 0;
}
.simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  padding: 2rem 1rem 3rem;
  position: relative;
  z-index: 2;
}

/* نور پس‌زمینه متحرک (glow gradient) */
.simple-grid::before,
.simple-grid::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.2;
  z-index: 0;
}
.simple-grid::before {
  width: 350px;
  height: 350px;
  top: -80px;
  left: -60px;
  background: radial-gradient(circle at top left, var(--primary,#4DA3FF), transparent 70%);
  animation: glowMove1 10s linear infinite alternate;
}
.simple-grid::after {
  width: 380px;
  height: 380px;
  bottom: -100px;
  right: -60px;
  background: radial-gradient(circle at bottom right, var(--accent,#FFB347), transparent 70%);
  animation: glowMove2 9s linear infinite alternate;
}

@keyframes glowMove1 {
  from { transform: translate(0,0) scale(1); opacity: 0.2; }
  to   { transform: translate(30px,20px) scale(1.1); opacity: 0.35; }
}
@keyframes glowMove2 {
  from { transform: translate(0,0) scale(1); opacity: 0.25; }
  to   { transform: translate(-25px,-15px) scale(1.15); opacity: 0.4; }
}

/* لینک محصولات */
.mini-product {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1rem 1.2rem 2.2rem; /* ← فضای پایین اضافه برای شعله */
  text-decoration: none;
  color: #ec9797;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  overflow: hidden;
  z-index: 1;
  transition: all 0.35s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* افکت براق سطح شیشه‌ای */
.mini-product::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
              rgba(255,255,255,0.15),
              rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* جلوگیری از تداخل hover */
  border-radius: inherit;
}
.mini-product:hover::before {
  opacity: 1;
}

/* حالت hover کلی کارت */
.mini-product:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  color: var(--accent, #FFB347);
  text-shadow: 0 0 10px rgba(255, 179, 71, 0.55);
}

/* آیکون شعله پایین کارت */
.mini-product::after {
  content: "🔥";
  position: absolute;
  right: 14px;
  bottom: 5px; /* پایین‌تر از متن */
  font-size: 1.2rem;
  color: var(--accent, #FFB347);
  text-shadow: 0 0 6px rgba(255, 179, 71, 0.7);
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.45s ease;
  pointer-events: none; /* جلوگیر از تداخل با کلیک */
}
.mini-product:hover::after {
  opacity: 1;
  transform: translateY(-3px) scale(1.15);
}

/* حالت خالی در Grid */
.simple-grid p {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  font-size: 1rem;
  margin-top: 1.5rem;
  letter-spacing: 0.3px;
}
/* اگر hero یا گالری سراسری داری */
.hero,
.gallery-horizontal {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
/* کارت‌ها در hover نباید اسکرول ایجاد کنن */
.mini-product {
  will-change: transform, box-shadow;
}
.mini-product:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  overflow: hidden;
}
.vp-dashboard {
  width: 95%;
  margin: 3rem auto 4rem;
  padding: 2.5rem 2rem;
  border-radius: 26px;
  background: rgba(13, 23, 37, 0.45);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 25px rgba(77, 163, 255, 0.3),
    inset 0 0 30px rgba(255, 179, 71, 0.08);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.vp-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
              rgba(77,163,255,0.25),
              transparent 70%);
  pointer-events: none;
}

.dashboard-head {
  text-align: center;
  margin-bottom: 2rem;
}
.dashboard-head h2 {
  font-size: 1.75rem;
  background: linear-gradient(90deg, #4DA3FF, #FFB347);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.dashboard-head p {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
}

/* stats cards */
.dashboard-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.stat-glass {
  flex: 1 1 180px;
  min-width: 200px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(140%);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
.stat-glass h3 {
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.6rem;
}
.stat-glass span {
  font-size: 1.8rem;
  font-weight: 600;
  background: linear-gradient(90deg, #4DA3FF, #FFB347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-glass:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 15px 35px rgba(77,163,255,0.45);
}

/* latest items section */
.dashboard-latest {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.dashboard-latest .section-head {
  text-align: center;
  background: linear-gradient(90deg, #FFB347, #4DA3FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.latest-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.latest-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.latest-card:hover {
  transform: translateY(-6px) scale(1.04);
}
.latest-card img {
  width: 100%; height: 130px; object-fit: cover;
}
.latest-info {
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  color: #fff;
}
.latest-info span {
  color: var(--accent,#FFB347);
  font-weight: 500;
}
.glass-toast {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: 14px;
  color: #fff;
  padding: 0.9rem 1.8rem;
  font-size: 0.92rem;
  transition: all .5s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
.glass-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.glass-toast.success {
  box-shadow: 0 0 18px rgba(77, 163, 255, 0.35);
}
.glass-toast.error {
  box-shadow: 0 0 18px rgba(255, 91, 91, 0.35);
  background: rgba(60, 15, 15, 0.6);
}

/* LIST- Sidebar */

.vp-home {
  font-family: "Estedad", sans-serif;
}

.vp-container {
  max-width: 1200px;
  margin: auto;
  padding: 1rem;
}

/* ==== دسته‌بندی‌ها ==== */
.vp-category-bar {
  display: flex;
  flex-direction: column;
  background: rgba(178, 215, 253, 0.35);
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem 1rem;
}
.vp-cat-toggle {
  display: none;
  background: none;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  color: #007185;
  cursor: pointer;
  margin-bottom: .5rem;
}
.vp-category-scroll {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.vp-category-scroll::-webkit-scrollbar { display: none; }
.vp-cat {
  color: #222;
  padding: .25rem .75rem;
  border-radius: 5px;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 500;
}
.vp-cat.active {
  background: #007185;
  color: #fff;
}

/* ==== کارت محصول ==== */
.vp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.vp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.vp-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.vp-img {
  display: block;
  padding-top: 100%;
  background-size: cover;
  background-position: center;
}
.vp-content {
  display: flex;
  flex-direction: column;
  padding: .75rem;
  flex: 1;
}
.vp-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.vp-desc {
  font-size: .85rem;
  color: #555;
  flex: 1;
}
.vp-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: .5rem;
}
.vp-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: #007185;
}
.vp-actions {
  display: flex;
  gap: .40rem;
}
.vp-btn {
  font-size: .8rem;
  padding: .25rem .5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  background: #f8f8f8;
  transition: background .2s;
}
.vp-btn:hover {
  background: #64c8da;
}
.vp-btn.cart {
  background: #007185;
  color: #fff;
  border: none;
}

/*Pagination*/
.vp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
  font-family: "Estedad", sans-serif;
  direction: rtl;
}

.vp-pagination .vp-page {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 .5rem;
  font-size: .9rem;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  transition: all .2s ease;
}

.vp-pagination .vp-page:hover {
  background: #f3f3f3;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}

.vp-pagination .current {
  color: #fff;
  background-color: #007185;
  border-color: #007185;
  font-weight: 600;
  cursor: default;
}

.vp-pagination .vp-page.prev,
.vp-pagination .vp-page.next {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .6rem;
}

.vp-pagination .vp-ellipsis {
  color: #aaa;
  padding: 0 .4rem;
  user-select: none;
}
/*---------------------Detail-------------------------*/
.vp-detail {
  padding: 2rem 0;
  background: #fafafa;
  color: #222;
  font-family: "Estedad", sans-serif;
}

.vp-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  align-items: start;
}

.vp-detail__gallery {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1rem;
}

.about__img.main-img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: .75rem;
}

.vp-detail__thumbs {
  display: flex;
  align-items: center;
  height: 85px;
  gap: .5rem;
  padding: 0.5rem .5rem;
  overflow-x: auto;
}
.vp-detail__thumbs .thumb-img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  object-fit: contain;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: transform .2s;
}
.vp-detail__thumbs .thumb-img:hover {
  transform: scale(1.05);
}
.vp-detail__thumbs .thumb-img {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s, border-color .2s;
}
.vp-detail__thumbs .thumb-img:hover {
  transform: scale(1.05);
}
.vp-detail__thumbs .thumb-img.active-thumb {
  border-color: #007185;
  box-shadow: 0 0 5px rgba(0,113,133,0.3);
}

.about__content {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.about__title {
  font-weight: 700;
  margin-bottom: .5rem;
}
.vp-features span {
  font-size: .9rem;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: .25rem;
  color: #444;
}
.about__description {
  font-size: .95rem;
  line-height: 1.8;
  margin: 1rem 0;
  color: #333;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-list__item {
  padding: .4rem 0;
  border-bottom: 1px solid #f1f1f1;
  font-size: .9rem;
}
.about-list__item.strike {
  text-decoration: line-through;
  color: #777;
}
.about__links-wrapper {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.app-btn {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: .9rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.app-btn--gray {
  background: #f5f5f5;
  border-color: #ddd;
}
.app-btn--gray:hover { background: #e9e9e9; }
.app-btn--accent {
  background: #007185;
  color: #fff;
}
.app-btn--accent:hover {
  background: #005f69;
}

/* --- Comments --- */
.vp-comments {
  margin-top: 1.5rem;
}
#comment-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
#comment-form input[type=text],
#comment-form textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: .5rem .75rem;
  font-size: .9rem;
  font-family: inherit;
}
#comment-form textarea { height: 120px; resize: vertical; }
#form-messages, #form-errors { font-size: .85rem; margin-top: .25rem; }
.vp-comment-list { list-style: none; margin: 0; padding: 0; }
.vp-comment-card {
  background: #f9f9f9;
  border: 1px solid #eee;
  padding: .75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: .5rem;
  font-size: .9rem;
}
.vp-comment-card b { color: #007185; }

/* --- Related Section --- */
.vp-related {
  margin-top: 3rem;
}
.vp-related h4 {
  font-size: 1.1rem;
  color: #007185;
  border-bottom: 2px solid #eee;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}
.vp-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: 1rem;
}
.vp-related__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  padding: .75rem;
  transition: transform .2s, box-shadow .2s;
}
.vp-related__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.07);
}
.vp-related__card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: .5rem;
}
.vp-related__card .name {
  font-weight: 500;
  font-size: .9rem;
  margin-bottom: .25rem;
}
.vp-related__card .price {
  font-weight: 600;
  color: #007185;
}
/* =======================================================
   🌙 VPStarShop – Product Detail Dark Mode (Minimal Clean)
   ======================================================= */

html[data-theme="dark"] .vp-detail {
  background-color: #0e0e0e;
  color: #e2e2e2;
}

/* گالری اصلی */
html[data-theme="dark"] .vp-detail__gallery {
  background-color: #141414;
  border: 1px solid #222;
  border-radius: 8px;
}
html[data-theme="dark"] .about__img.main-img {
  background-color: #181818;
  border-radius: 6px;
}
html[data-theme="dark"] .vp-detail__thumbs {
  background-color: #101010;
  height: 90px;
  border-top: 1px solid #222;
}
html[data-theme="dark"] .vp-detail__thumbs .thumb-img {
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
  border-radius: 4px;
  transition: all 0.2s ease;
}
html[data-theme="dark"] .vp-detail__thumbs .thumb-img:hover {
  border-color: #00a1ad;
  transform: scale(1.05);
}
html[data-theme="dark"] .vp-detail__thumbs .thumb-img.active-thumb {
  border-color: #00a1ad;
  box-shadow: 0 0 8px rgba(0,161,173,0.5);
}

/* محتوای سمت راست */
html[data-theme="dark"] .about__content {
  background-color: #141414;
  border: 1px solid #232323;
  border-radius: 8px;
  color: #dedede;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .about__title {
  color: #00a1ad;
}

html[data-theme="dark"] .vp-features span {
  color: #c8c8c8;
}
html[data-theme="dark"] .vp-features b {
  color: #fff;
}

/* توضیحات */
html[data-theme="dark"] .about__description {
  color: #ccc;
}

/* لیست قیمت و جزئیات */
html[data-theme="dark"] .about-list__item {
  border-bottom: 1px solid #272727;
  color: #d3d3d3;
}
html[data-theme="dark"] .about-list__item.strike {
  color: #888;
  text-decoration-color: #444;
}
html[data-theme="dark"] .about-list__item b {
  color: #00a1ad;
}

/* دکمه‌ها */
html[data-theme="dark"] .app-btn--gray {
  background-color: #2a2a2a;
  color: #f0f0f0;
  border: 1px solid #3a3a3a;
}
html[data-theme="dark"] .app-btn--gray:hover {
  background-color: #383838;
  color: #fff;
}
html[data-theme="dark"] .app-btn--accent {
  background-color: #00a1ad;
  color: #fff;
  border: 1px solid #00a1ad;
}
html[data-theme="dark"] .app-btn--accent:hover {
  background-color: #00939d;
}

/* فرم کامنت‌ها */
html[data-theme="dark"] #comment-form input[type=text],
html[data-theme="dark"] #comment-form textarea {
  background-color: #1d1d1d;
  color: #f7f7f7;
  border: 1px solid #333;
  border-radius: 6px;
}
html[data-theme="dark"] #comment-form input[type=text]:focus,
html[data-theme="dark"] #comment-form textarea:focus {
  border-color: #00a1ad;
}

/* کارت‌های کامنت */
html[data-theme="dark"] .vp-comment-card {
  background: #121212;
  border: 1px solid #2b2b2b;
  color: #e3e3e3;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .vp-comment-card b {
  color: #00a1ad;
}
html[data-theme="dark"] .vp-comment-card small {
  color: #999;
}

/* محصولات مشابه و پیشنهاد ویژه */
html[data-theme="dark"] .vp-related h4 {
  color: #00a1ad;
  border-bottom: 1px solid #333;
}
html[data-theme="dark"] .vp-related__card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  transition: all 0.2s ease;
}
html[data-theme="dark"] .vp-related__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .vp-related__card .name {
  color: #e2e2e2;
}
html[data-theme="dark"] .vp-related__card .price {
  color: #00a1ad;
}

/* اسکرول بار */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #101010;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #444;
}

/* لینک‌ها */
html[data-theme="dark"] a {
  color: #00a1ad;
  text-decoration: none;
}
html[data-theme="dark"] a:hover {
  color: #00c3d0;
}
/* ===========================
   🌿 VPStarShop – Profile Page
   =========================== */

.profile-section {
  padding: 4rem 0;
  background-color: #fff;
  color: #222;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}

html[data-theme="dark"] .profile-section {
  background-color: #0e0e0e;
  color: #f0f0f0;
}

/* Wrapper layout */
.profile-wrapper {
  display: grid;
  gap: 2rem;
  grid-template-columns: 260px 1fr;
}
/* Sidebar */
.profile-sidebar {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 1.5rem;
}
html[data-theme="dark"] .profile-sidebar {
  background: #141414;
  border-color: #222;
}

/* Avatar */
.profile-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 1rem;
}
.profile-avatar.placeholder {
  background-color: #007185;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.profile-name {
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
}
.profile-username {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-bottom: 1.5rem;
}
html[data-theme="dark"] .profile-username {
  color: #aaa;
}

/* Nav buttons */
.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nav-btn {
  text-align: right;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  color: #444;
  transition: all 0.2s;
}
.nav-btn i {
  margin-left: 0.5rem;
}
.nav-btn.active,
.nav-btn:hover {
  background-color: #007185;
  color: #fff;
}
html[data-theme="dark"] .nav-btn {
  color: #ccc;
}
html[data-theme="dark"] .nav-btn.active {
  background-color: #00a1ad;
  color: #fff;
}

/* Content area */
.profile-content {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
}
html[data-theme="dark"] .profile-content {
  background: #121212;
  border-color: #2a2a2a;
}
.tab-title {
  font-weight: 600;
  font-size: 1.2rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
}
html[data-theme="dark"] .tab-title {
  border-color: #222;
}
.info-list li {
  margin: 0.5rem 0;
}
.info-list span {
  color: #555;
  width: 100px;
  display: inline-block;
}
html[data-theme="dark"] .info-list span {
  color: #aaa;
}

/* Buttons */
.vp-btn,
.vp-btn-outline,
.vp-btn-danger {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.65rem 1.6rem;
  transition: all 0.2s ease;
  margin-top: 1rem;
}
.vp-btn {
  background-color: #007185;
  color: #fff;
  border: none;
}
.vp-btn:hover {
  background-color: #005f6d;
}
.vp-btn-outline {
  border: 1px solid #007185;
  color: #007185;
  background: none;
}
.vp-btn-outline:hover {
  background-color: #007185;
  color: #fff;
}
.vp-btn-danger {
  background-color: #d9534f;
  color: #fff;
  border: none;
}
.vp-btn-danger:hover {
  background-color: #b33935;
}

/* Tabs */
.profile-tab {
  display: none;
}
.profile-tab.active {
  display: block;
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.orders-table th, .orders-table td {
  border: 1px solid #e6e6e6;
  padding: 0.75rem;
  text-align: center;
}
.badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
}
.badge.success { background-color: #28a745; }
.badge.danger { background-color: #dc3545; }
.empty-orders { color: #777; margin-top: 1rem; }
.items-table {
  width: 100%;
  background: #fafafa;
  border-collapse: collapse;
  margin-top: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
}
.items-table th, .items-table td {
  border: 1px solid #e6e6e6;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.9rem;
}
.items-row td { background: #fdfdfd; }
html[data-theme="dark"] .items-table th,
html[data-theme="dark"] .items-table td {
  border-color: #333;
  background-color: #181818;
}
.show-items {
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
}

/* ======================================
   🧩 VPStarShop — Search Results Style
   ====================================== */

.vp-search {
  padding: 4rem 0 6rem;
  font-family: "Estedad", "Vazirmatn", sans-serif;
  color: #222;
  background-color: #fff;
}
html[data-theme="dark"] .vp-search {
  background-color: #0e0e0e;
  color: #f0f0f0;
}

/* Header */
.vp-search__header {
  text-align: right;
  margin-bottom: 2rem;
}
.vp-search__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.vp-search__query {
  color: #007185;
}
html[data-theme="dark"] .vp-search__query {
  color: #00a1ad;
}
.vp-search__count {
  color: #666;
  font-size: 0.9rem;
}
html[data-theme="dark"] .vp-search__count {
  color: #999;
}

/* Layout */
.vp-search__layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2rem;
}

/* Sidebar */
.vp-search__sidebar {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.5rem;
}
html[data-theme="dark"] .vp-search__sidebar {
  background: #141414;
  border-color: #222;
}

.sidebar__title {
  margin-bottom: 1rem;
  font-weight: 600;
}
.sidebar__links li {
  margin-bottom: .4rem;
}
.sidebar__link {
  color: #444;
  display: inline-block;
  padding: .35rem 0;
  transition: color 0.2s ease;
}
.sidebar__link:hover {
  color: #007185;
}
html[data-theme="dark"] .sidebar__link {
  color: #ccc;
}
html[data-theme="dark"] .sidebar__link:hover {
  color: #00a1ad;
}

/* Products Grid */
.vp-products-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Product Card */
.vp-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.vp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
html[data-theme="dark"] .vp-card {
  background: #161616;
  border-color: #282828;
}
html[data-theme="dark"] .vp-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.vp-card__img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.vp-card__body {
  padding: 1rem;
}
.vp-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .4rem 0;
}
.vp-card__desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 .6rem 0;
}
html[data-theme="dark"] .vp-card__desc {
  color: #aaa;
}
.vp-card__price {
  font-weight: 600;
  color: #007185;
  margin-bottom: 0.8rem;
}
html[data-theme="dark"] .vp-card__price {
  color: #00a1ad;
}

/* Buttons */
.vp-btn, .vp-btn-outline {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}
.vp-card__actions {
  display: flex;
  gap: .5rem;
}

.vp-btn {
  background-color: #007185;
  color: #fff;
  border: none;
}
.vp-btn:hover {
  background-color: #005f6d;
}
.vp-btn-outline {
  background: none;
  color: #007185;
  border: 1px solid #007185;
}
.vp-btn-outline:hover {
  background-color: #007185;
  color: #fff;
}
html[data-theme="dark"] .vp-btn-outline {
  color: #00a1ad;
  border-color: #00a1ad;
}
html[data-theme="dark"] .vp-btn-outline:hover {
  background-color: #00a1ad;
  color: #fff;
}

/* Empty results */
.vp-search__empty {
  text-align: center;
  color: #999;
  padding: 2rem 0;
  font-size: 1rem;
}

/* =====================================
   🌿 VPStarShop – Signature Footer
   ===================================== */

.vp-footer {
  background: #f9f9f9;
  color: #333;
  border-top: 1px solid #e4e4e4;
  padding: 4rem 0 2rem;
  text-align: center;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-footer {
  background: #0c0c0c;
  border-top-color: #1e1e1e;
  color: #ddd;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Logo + description */
.footer__logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: #007185;
}
.footer__logo span {
  color: #00a1ad;
}
html[data-theme="dark"] .footer__logo {
  color: #00a1ad;
}
.footer__desc {
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}
html[data-theme="dark"] .footer__desc {
  color: #aaa;
}

/* Social Buttons */
.footer__socials {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__social {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f3f5;
  transition: all 0.3s ease;
}
html[data-theme="dark"] .footer__social {
  background: #1b1b1b;
}
.footer__social svg { fill: #007185; width: 22px; height: 22px; }

.footer__social:hover {
  transform: translateY(-4px);
}
.footer__social.insta:hover svg { fill: #d6249f; }
.footer__social.telegram:hover svg { fill: #0088cc; }
.footer__social.twitter:hover svg { fill: #1da1f2; }
.footer__social.youtube:hover svg { fill: #ff0000; }

/* Bottom links */
.footer__links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.footer__links a {
  color: #555;
  transition: color 0.2s ease;
}
.footer__links a:hover { color: #007185; }
html[data-theme="dark"] .footer__links a {
  color: #aaa;
}
html[data-theme="dark"] .footer__links a:hover {
  color: #00a1ad;
}

/* Copyright */
.footer__copyright {
  font-size: 0.85rem;
  color: #888;
  margin-top: 1rem;
}
html[data-theme="dark"] .footer__copyright {
  color: #666;
}
/* =====================================
   📮 VPStarShop – Contact/Ticket Page
   ===================================== */
.vp-contact {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}

html[data-theme="dark"] .vp-contact {
  background: #0c0c0c;
  color: #ccc;
}

.vp-contact__container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* 🔹 ستون اول باریک‌تر */
  gap: 3rem;
  align-items: center;
}
/* Info section */
.vp-contact__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.vp-contact__iconbox {
  background: #e0f3f3;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.vp-contact__iconbox:hover {
  transform: scale(1.08);
}
html[data-theme="dark"] .vp-contact__iconbox {
  background: #1a1a1a;
}
.vp-contact__iconbox svg { height: 40px; }

.vp-contact__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-contact__title {
  color: #00a1ad;
}
.vp-contact__text {
  font-size: 0.95rem;
  color: #555;
  max-width: 370px;
  line-height: 1.8;
}
html[data-theme="dark"] .vp-contact__text {
  color: #aaa;
}

/* Form Section */
.vp-contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.vp-contact__form p label {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  display: block;
}

.vp-contact__form input[type="text"],
.vp-contact__form input[type="email"],
.vp-contact__form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background-color 0.3s ease;
  background: #fff;
  color: #333;
}
.vp-contact__form textarea { min-height: 130px; resize: vertical; }

html[data-theme="dark"] .vp-contact__form input,
html[data-theme="dark"] .vp-contact__form textarea {
  background: #101010;
  border-color: #333;
  color: #ddd;
}

/* Focus */
.vp-contact__form input:focus,
.vp-contact__form textarea:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-contact__form input:focus,
html[data-theme="dark"] .vp-contact__form textarea:focus {
  border-color: #00a1ad;
}

/* Submit Button */
.vp-contact__btn {
  background: #007185;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.vp-contact__btn:hover {
  background: #005e6f;
}
html[data-theme="dark"] .vp-contact__btn {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-contact__btn:hover {
  background: #008a97;
}

/* Success Message */
.vp-contact__success {
  margin-top: 2rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #007185;
}
html[data-theme="dark"] .vp-contact__success { color: #00a1ad; }

/* ===============================
   👤 VPStarShop – Edit Profile Page
   =============================== */

.vp-editprofile {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}

html[data-theme="dark"] .vp-editprofile {
  background: #0c0c0c;
  color: #ccc;
}

/* Header متن بالا */
.vp-editprofile__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-section__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-section__title {
  color: #00a1ad;
}
.vp-section__desc {
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
html[data-theme="dark"] .vp-section__desc { color: #aaa; }
.vp-section__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-section__line { background: #00a1ad; }

/* Grid Container */
.vp-editprofile__container {
  display: grid;
  grid-template-columns: 35% 65%; /* باریک‌تر برای ستون info */
  gap: 3rem;
  align-items: start;
}
/* Info Column */
.vp-editprofile__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.vp-editprofile__iconbox {
  background: #e0f3f3;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-editprofile__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-editprofile__iconbox { background: #1a1a1a; }

.vp-editprofile__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-editprofile__title { color: #00a1ad; }

.vp-editprofile__text {
  color: #555;
  font-size: 0.93rem;
  max-width: 380px;
  line-height: 1.8;
}
html[data-theme="dark"] .vp-editprofile__text { color: #aaa; }

/* Form Styles */
.vp-editprofile__form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.vp-editprofile__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.vp-editprofile__form input[type="text"],
.vp-editprofile__form input[type="email"],
.vp-editprofile__form input[type="file"],
.vp-editprofile__form input[type="password"],
.vp-editprofile__form textarea {
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color 0.2s ease, background-color 0.3s ease;
}
html[data-theme="dark"] .vp-editprofile__form input,
html[data-theme="dark"] .vp-editprofile__form textarea {
  background: #101010;
  border-color: #333;
  color: #ddd;
}

.vp-editprofile__form input:focus,
.vp-editprofile__form textarea:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-editprofile__form input:focus,
html[data-theme="dark"] .vp-editprofile__form textarea:focus {
  border-color: #00a1ad;
}

/* Button */
.vp-btn.vp-btn--accent {
  width: fit-content;
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .25s ease;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent { background: #00a1ad; }
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover { background: #008b97; }
html[data-theme="dark"] .vp-editprofile__icon path,
html[data-theme="dark"] .vp-editprofile__icon circle {
  stroke: #00a1ad;
  fill: #00a1ad;
}

/* =====================================
   🔐 VPStarShop – Login Page Style
   ===================================== */

.vp-login {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-login {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-login__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-section__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-section__title { color: #00a1ad; }

.vp-section__desc {
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
html[data-theme="dark"] .vp-section__desc { color: #aaa; }

.vp-section__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-section__line { background: #00a1ad; }

/* Layout Grid */
.vp-login__container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  align-items: start;
}
/* Info Section */
.vp-login__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-login__iconbox {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-login__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-login__iconbox { background: #1a1a1a; }

.vp-login__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-login__title { color: #00a1ad; }

.vp-login__text {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.8;
  max-width: 380px;
}
html[data-theme="dark"] .vp-login__text { color: #aaa; }
.vp-login__text a { color: #007185; font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .vp-login__text a { color: #00a1ad; }

/* Form */
.vp-login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-login__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.vp-login__form input[type="text"],
.vp-login__form input[type="email"],
.vp-login__form input[type="password"] {
  width: 80%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

html[data-theme="dark"] .vp-login__form input {
  background: #101010;
  border-color: #333;
  color: #ddd;
}
.vp-login__form input:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-login__form input:focus { border-color: #00a1ad; }

/* Submit button */
.vp-btn.vp-btn--accent {
  width: fit-content;
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .25s ease;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent { background: #00a1ad; }
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover { background: #008b97; }

/* Forgot password link */
.vp-login__forgot {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: #007185;
  text-decoration: none;
}
.vp-login__forgot:hover { text-decoration: underline; }
html[data-theme="dark"] .vp-login__forgot { color: #00a1ad; }
html[data-theme="dark"] .vp-login__icon path,
html[data-theme="dark"] .vp-login__icon rect,
html[data-theme="dark"] .vp-login__icon circle {
  stroke: #00a1ad;
  fill: #00a1ad;
}

/* =====================================
   🟢 VPStarShop – Password Change Done
   ===================================== */

.vp-success {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 1.5rem 6rem;
  background: #fafafa;
  color: #333;
  text-align: center;
  min-height: 70vh;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-success {
  background: #0c0c0c;
  color: #ccc;
}

.vp-success__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.vp-success__iconbox {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: #e4f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-success__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-success__iconbox { background: #121212; }

.vp-success__icon circle,
.vp-success__icon path {
  transition: stroke .3s ease;
}
html[data-theme="dark"] .vp-success__icon circle,
html[data-theme="dark"] .vp-success__icon path {
  stroke: #00a1ad;
}

.vp-success__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-success__title { color: #00a1ad; }

.vp-success__caption {
  font-size: 0.95rem;
  max-width: 400px;
  color: #555;
  margin: 0.5rem auto 0;
  line-height: 1.8;
}
html[data-theme="dark"] .vp-success__caption { color: #aaa; }

.vp-success__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin: 1.2rem 0;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-success__line { background: #00a1ad; }

.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .25s ease;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent { background: #00a1ad; }
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover { background: #008b97; }

/* =====================================
   🔐 VPStarShop – Password Change Page
   ===================================== */

.vp-password {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-password {
  background: #0c0c0c;
  color: #ccc;
}

/* Header title & caption */
.vp-password__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-section__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-section__title { color: #00a1ad; }
.vp-section__desc {
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}
html[data-theme="dark"] .vp-section__desc { color: #aaa; }
.vp-section__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-section__line { background: #00a1ad; }

/* Layout */
.vp-password__container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  align-items: start;
}
/* Info column */
.vp-password__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-password__iconbox {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-password__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-password__iconbox { background: #1a1a1a; }

.vp-password__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-password__title { color: #00a1ad; }

.vp-password__text {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.8;
  max-width: 380px;
}
html[data-theme="dark"] .vp-password__text { color: #aaa; }

/* Form */
.vp-password__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-password__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.vp-password__form input[type="text"],
.vp-password__form input[type="password"] {
  width: 80%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
html[data-theme="dark"] .vp-password__form input {
  background: #101010;
  border-color: #333;
  color: #ddd;
}
.vp-password__form input:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-password__form input:focus { border-color: #00a1ad; }

/* Button */
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.75rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .25s ease;
  width: fit-content;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent { background: #00a1ad; }
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover { background: #008b97; }

/* ============================================
   ✅ VPStarShop – Password Reset Complete
   ============================================ */

.vp-success {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html[data-theme="dark"] .vp-success {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-success__head {
  margin-bottom: 2rem;
}
.vp-success__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-success__title { color: #00a1ad; }

.vp-success__desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.5rem;
}
html[data-theme="dark"] .vp-success__desc { color: #aaa; }

.vp-success__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-success__line { background: #00a1ad; }

/* Icon */
.vp-success__iconbox {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  transition: transform .4s ease;
}
.vp-success__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-success__iconbox { background: #1a1a1a; }

.vp-success__icon {
  transition: stroke 0.3s ease;
}
html[data-theme="dark"] .vp-success__icon path,
html[data-theme="dark"] .vp-success__icon circle {
  stroke: #00a1ad;
}

/* Actions */
.vp-success__actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.75rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease;
  text-decoration: none;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover {
  background: #008b97;
}
/* ==============================================
   🔐 VPStarShop – Password Reset Confirm Page
   ============================================== */

.vp-reset {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-reset {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-reset__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-reset__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-reset__title { color: #00a1ad; }

.vp-reset__desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: .4rem;
}
html[data-theme="dark"] .vp-reset__desc { color: #aaa; }

.vp-reset__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: .8rem;
}
html[data-theme="dark"] .vp-reset__line { background: #00a1ad; }

/* Layout */
.vp-reset__container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  align-items: start;
}
/* Info column */
.vp-reset__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-reset__iconbox {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-reset__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-reset__iconbox { background: #1a1a1a; }

.vp-reset__subtitle {
  font-weight: 600;
  color: #007185;
  font-size: 1.25rem;
}
html[data-theme="dark"] .vp-reset__subtitle { color: #00a1ad; }

.vp-reset__text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
  max-width: 380px;
}
html[data-theme="dark"] .vp-reset__text { color: #aaa; }

/* Form styles */
.vp-reset__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-reset__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.vp-reset__form input[type="password"],
.vp-reset__form input[type="text"] {
  width: 94%;
  margin: 0 auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color .3s ease, background-color .3s ease;
}
html[data-theme="dark"] .vp-reset__form input {
  background: #101010;
  border-color: #333;
  color: #ddd;
}
.vp-reset__form input:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-reset__form input:focus { border-color: #00a1ad; }

/* Buttons */
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .25s ease;
  width: fit-content;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover {
  background: #008b97;
}

/* Invalid link */
.vp-reset__invalid {
  color: #d00;
  margin-bottom: 1rem;
}
html[data-theme="dark"] .vp-reset__invalid { color: #ff6b6b; }

.vp-btn.vp-btn--link {
  color: #007185;
  text-decoration: none;
  font-weight: 500;
}
.vp-btn.vp-btn--link:hover { text-decoration: underline; }
html[data-theme="dark"] .vp-btn.vp-btn--link { color: #00a1ad; }
/* ============================================
   📧 VPStarShop – Password Reset Done Page
   ============================================ */

.vp-success {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html[data-theme="dark"] .vp-success {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-success__head {
  margin-bottom: 2rem;
}
.vp-success__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-success__title { color: #00a1ad; }

.vp-success__desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.5rem;
}
html[data-theme="dark"] .vp-success__desc { color: #aaa; }

.vp-success__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
  border-radius: 1px;
}
html[data-theme="dark"] .vp-success__line { background: #00a1ad; }

/* Icon */
.vp-success__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5rem;
}
.vp-success__iconbox {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease;
}
.vp-success__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-success__iconbox { background: #1a1a1a; }

.vp-success__icon {
  transition: stroke 0.3s ease;
}
html[data-theme="dark"] .vp-success__icon path,
html[data-theme="dark"] .vp-success__icon rect {
  stroke: #00a1ad;
}

/* Action button */
.vp-success__actions {
  margin-top: 2rem;
}
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease;
  text-decoration: none;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover {
  background: #008b97;
}
/* ==============================================
   ✉️ VPStarShop – Password Reset Request Page
   ============================================== */

.vp-reset {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-reset {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-reset__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-reset__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-reset__title { color: #00a1ad; }

.vp-reset__desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.4rem;
}
html[data-theme="dark"] .vp-reset__desc { color: #aaa; }

.vp-reset__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
}
html[data-theme="dark"] .vp-reset__line { background: #00a1ad; }

/* Layout */
.vp-reset__container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  align-items: start;
}
/* Information column */
.vp-reset__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-reset__iconbox {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-reset__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-reset__iconbox { background: #1a1a1a; }

.vp-reset__subtitle {
  font-weight: 600;
  color: #007185;
  font-size: 1.25rem;
}
html[data-theme="dark"] .vp-reset__subtitle { color: #00a1ad; }

.vp-reset__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
  max-width: 380px;
}
html[data-theme="dark"] .vp-reset__text { color: #aaa; }

/* Form */
.vp-reset__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-reset__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.vp-reset__form input[type="email"],
.vp-reset__form input[type="text"] {
  width: 80%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color .3s ease, background-color .3s ease;
}
html[data-theme="dark"] .vp-reset__form input {
  background: #101010;
  border-color: #333;
  color: #ddd;
}
.vp-reset__form input:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-reset__form input:focus { border-color: #00a1ad; }

/* Button */
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease;
  width: fit-content;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover {
  background: #008b97;
}

/* ==============================================
   👤 VPStarShop – Register Page
   ============================================== */

.vp-register {
  padding: 4rem 0 5rem;
  background: #fafafa;
  color: #333;
  font-family: "Estedad", "Vazirmatn", sans-serif;
}
html[data-theme="dark"] .vp-register {
  background: #0c0c0c;
  color: #ccc;
}

/* Header */
.vp-register__head {
  text-align: center;
  margin-bottom: 3rem;
}
.vp-register__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-register__title { color: #00a1ad; }

.vp-register__desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.4rem;
}
html[data-theme="dark"] .vp-register__desc { color: #aaa; }

.vp-register__line {
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #007185;
  margin-top: 0.8rem;
}
html[data-theme="dark"] .vp-register__line { background: #00a1ad; }

/* Layout */
.vp-register__container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  align-items: start;
}
/* Info (icon and text) */
.vp-register__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-register__iconbox {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #e0f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.vp-register__iconbox:hover { transform: scale(1.05); }
html[data-theme="dark"] .vp-register__iconbox { background: #1a1a1a; }

.vp-register__subtitle {
  font-weight: 600;
  color: #007185;
  font-size: 1.25rem;
}
html[data-theme="dark"] .vp-register__subtitle { color: #00a1ad; }

.vp-register__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
  max-width: 380px;
}
html[data-theme="dark"] .vp-register__text { color: #aaa; }

/* Form */
.vp-register__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vp-register__form p label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.vp-register__form input[type="text"],
.vp-register__form input[type="email"],
.vp-register__form input[type="password"],
.vp-register__form input[type="file"],
.vp-register__form textarea{
  width: 80%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #333;
  transition: border-color .3s ease, background-color .3s ease;
}
html[data-theme="dark"] .vp-register__form input  {
  background: #101010;
  border-color: #333;
  color: #ddd;
}
html[data-theme="dark"] .vp-register__form textarea  {
  background: #101010;
  border-color: #333;
  color: #ddd;
}

.vp-register__form input:focus {
  outline: none;
  border-color: #007185;
}
html[data-theme="dark"] .vp-register__form input:focus { border-color: #00a1ad; }

/* Buttons */
.vp-btn.vp-btn--accent {
  background: #007185;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease;
  width: fit-content;
}
.vp-btn.vp-btn--accent:hover { background: #005e6f; }
html[data-theme="dark"] .vp-btn.vp-btn--accent {
  background: #00a1ad;
}
html[data-theme="dark"] .vp-btn.vp-btn--accent:hover {
  background: #008b97;
}

/* =========================================================
   🛒 VPStarShop – Cart Page (vp-cart)
   ========================================================= */

.vp-cart {
  background: #fafafa;
  padding: 3rem 0;
  color: #222;
  font-family: "Estedad", sans-serif;
}
/* 🎯 حالت کلی (به‌ویژه برای دسکتاپ) */
.vp-cart__container,
.row {
  display: flex;                /* فعال‌سازی فلکس برای چیدمان جهت‌دار */
  flex-wrap: wrap;              /* تا کارت‌ها خط بعدی برن */
  justify-content: center;      /* 💎 آیتم‌ها وسط صفحه چیده می‌شن */
  align-items: flex-start;      /* از بالا هم‌تراز بمونن */
}

html[data-theme="dark"] .vp-cart {
  background: #0b0b0b;
  color: #ddd;
}

.vp-cart__head {
  text-align: center;
  margin-bottom: 2rem;
}
.vp-cart__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-cart__title { color: #00a1ad; }

.vp-cart__desc {
  color: #666;
  margin-bottom: 0.5rem;
}
html[data-theme="dark"] .vp-cart__desc { color: #999; }

.vp-cart__line {
  display: inline-block;
  width: 80px;
  height: 2px;
  background: #007185;
}
html[data-theme="dark"] .vp-cart__line { background: #00a1ad; }

/* Cards */
.vp-cart__card {
  background: #fff;
  width: 80%;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  padding: 1rem 1.25rem; /* کاهش از حدود 2rem قبلی */
  transition: transform .2s ease, box-shadow .2s ease;
}
.vp-cart__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
html[data-theme="dark"] .vp-cart__card {
  background: #141414;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}

.vp-cart__subtitle {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #007185;
}
html[data-theme="dark"] .vp-cart__subtitle { color: #00a1ad; }

.vp-cart__image-wrap {
  text-align: center;
  margin-bottom: 0.75rem; /* کاهش فاصله زیر عکس */
}
.vp-cart__img {
  width: 100%;
  max-height: 200px; /* ارتفاع محدود و متناسب */
  border-radius: 40px;
  object-fit: contain;
}

/* Product info list */
.vp-cart__details {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  text-align: center;
}
.vp-cart__detail {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}
html[data-theme="dark"] .vp-cart__detail { color: #ccc; }

.vp-cart__actions {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem; /* کمتر از قبل */
}

/* Summary box */
.vp-cart__summary {
  text-align: center;
}
.vp-cart__summary-box {
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  max-width: 500px;
  margin: 1rem auto 0; /* 🔹 اضافه شد: فاصله از بالا */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
html[data-theme="dark"] .vp-cart__summary-box {
  background: #121212;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}

.vp-cart__summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 0.5rem;
  color: #333;
}
.vp-cart__summary-item h4 {
  font-weight: 500;
  font-size: 1rem;
}
.vp-cart__summary-total {
  color: #007185;
  font-weight: 600;
}
html[data-theme="dark"] .vp-cart__summary-item {
  color: #ccc;
  border-color: #333;
}
html[data-theme="dark"] .vp-cart__summary-total { color: #00a1ad; }

.vp-cart__buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.vp-cart__buttons a {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
}

/*----------------------VP-order-verify-------------*/
/* ساختار کلی صفحه سفارش */
.vp-order {
  padding: 2rem 1rem 4rem;
  text-align: center;
  background-color: #ffffff; /* پس‌زمینه اصلی صفحه */
  color: #111111;            /* متن اصلی */
}

/* هدر صفحه */
.vp-order__head {
  margin-bottom: 2rem;
}

.vp-order__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #111111;
}

.vp-order__subtitle {
  color: #777;
  margin-bottom: 0.5rem;
}

.vp-order__line {
  display: block;
  width: 80px;
  height: 3px;
  background: #007185;  /* رنگ برند */
  border-radius: 3px;
  margin: 0.5rem auto;
}

/* چیدمان دوبخشی */
.vp-order__container {
  display: grid;
  grid-template-columns: 40% 60%;
  column-gap: 3rem;
  justify-content: center;
  align-items: start;
}

/* بخش محصولات */
.vp-order__cart {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.vp-order__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  text-align: right;
}

.vp-order__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  color: #222;
}

.vp-order__price {
  font-weight: 600;
  color: #007185; /* رنگ برند */
}

/* بخش فرم */
.vp-order__form-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.vp-order__form input,
.vp-order__form select,
.vp-order__form textarea {
  width: 94%;
  margin: 0.3rem auto 0.8rem;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
  display: block;
  color: #111;
  background-color: #fff;
}

.vp-order__form input:focus,
.vp-order__form select:focus,
.vp-order__form textarea:focus {
  outline: none;
  border-color: #007185;
  box-shadow: 0 0 4px rgba(0, 113, 133, 0.3);
}

/* دکمه اصلی */
.vp-btn {
  display: inline-block;
  background: #007185;  /* رنگ اصلی برند */
  color: #fff;
  padding: 0.6rem 1.6rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vp-btn:hover {
  background: #00a1ad; /* رنگ هاور */
}

/* پیام‌ها */
.vp-order__message {
  margin-top: 1rem;
  color: #007185;
  font-weight: 500;
}

/* ===================== 🌙 تم دارک ======================= */
html[data-theme='dark'] .vp-order {
  background-color: #0e0e0e;
  color: #e0e0e0;
}

html[data-theme='dark'] .vp-order__cart,
html[data-theme='dark'] .vp-order__form-box {
  background: #121212;
  border: 1px solid #2a2a2a;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}

html[data-theme='dark'] .vp-order__title {
  color: #e4e4e4;
}

html[data-theme='dark'] .vp-order__line {
  background: #00a1ad;
}

html[data-theme='dark'] .vp-order__price {
  color: #00a1ad;
}
html[data-theme='dark'] .vp-order__product {
  color: #676666;
}
html[data-theme='dark'] .vp-order__qty {
  color: #7e7d7d;
}

html[data-theme='dark'] .vp-order__form input,
html[data-theme='dark'] .vp-order__form textarea,
html[data-theme='dark'] .vp-order__form select {
  background-color: #191919;
  color: #e0e0e0;
  border: 1px solid #333;
}

html[data-theme='dark'] .vp-btn {
  background: #00a1ad;
  color: #fff;
}

html[data-theme='dark'] .vp-btn:hover {
  background: #00b7c4;
  color: #fff;
}

/*----------------vrify phone------------*/
/* 📱 ساختار کلی */
.vp-phone-verify {
  padding: 3rem 0 5rem;
}

/* کانتینر اصلی - دو ستونه (۳۵٪ / ۶۵٪) */
.vp-auth__container {
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: center;
  justify-content: center;
  column-gap: 3rem;
}

/* ستون اطلاعات */
.vp-auth__info {
  text-align: center;
  padding: 1rem;
}

.vp-auth__icon-box {
  margin-bottom: 1.2rem;
}

.vp-auth__heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.5rem;
}

.vp-auth__text {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 85%;
  margin: 0 auto;
}

/* ستون فرم */
.vp-auth__form-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.vp-auth__form-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 1rem;
  text-align: center;
}

/* فیلدهای فرم */
.vp-auth__form input[type="text"],
.vp-auth__form input[type="number"],
.vp-auth__form input[type="tel"],
.vp-auth__form input[type="email"],
.vp-auth__form input[type="password"] {
  width: 94%;
  margin: 0.4rem auto 0.9rem;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: block;
  font-family: inherit;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 2px;
}

.vp-auth__form input:focus {
  outline: none;
  border-color: #007185;
  box-shadow: 0 0 4px rgba(0, 113, 133, 0.3);
}

/* دکمه ارسال */
.vp-btn--primary {
  display: inline-block;
  background: #007185;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.6rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.25s ease;
}

.vp-btn--primary:hover {
  background: #00a1ad;
}

/* پیام موفق/خطا */
.vp-auth__message {
  margin-top: 1rem;
  color: #007185;
  text-align: center;
}

/* 🌙 تم دارک */
html[data-theme='dark'] .vp-auth__info {
  color: #e0e0e0;
}

html[data-theme='dark'] .vp-auth__form-box {
  background: #121212;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}

html[data-theme='dark'] .vp-auth__heading {
  color: #e4e4e4;
}

html[data-theme='dark'] .vp-auth__form input {
  background-color: #191919;
  border: 1px solid #333;
  color: #e0e0e0;
}

html[data-theme='dark'] .vp-btn--primary {
  background: #00a1ad;
}

html[data-theme='dark'] .vp-btn--primary:hover {
  background: #00b7c4;
}

/*------------- verify code-----------*/
/* 🔹 ساختار کلی */
.vp-code-verify {
  padding: 3rem 0 5rem;
}

/* دو ستونه (۳۵٪ / ۶۵٪) */
.vp-auth__container {
  display: grid;
  grid-template-columns: 35% 65%;
  justify-content: center;
  align-items: center;
  column-gap: 3rem;
}

/* بخش توضیح */
.vp-auth__info {
  text-align: center;
  padding: 1rem;
}
.vp-auth__icon-box {
  margin-bottom: 1.2rem;
}
.vp-auth__heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.5rem;
}
.vp-auth__text {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 85%;
  margin: 0 auto;
}

/* بخش فرم */
.vp-auth__form-box {
  background: #fff;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.vp-auth__form-title {
  text-align: center;
  color: #111;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* فیلد ورودی کد */
.vp-auth__form input[type="text"] {
  width: 94%;
  margin: 0.4rem auto 1rem;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: block;
  text-align: center;
  font-size: 1.1rem;
  font-family: inherit;
  letter-spacing: 3px;
  color: #111;
}
.vp-auth__form input[type="text"]:focus {
  outline: none;
  border-color: #007185;
  box-shadow: 0 0 5px rgba(0, 113, 133, 0.3);
}

/* دکمه تأیید */
.vp-btn--primary {
  display: inline-block;
  background: #007185;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}
.vp-btn--primary:hover {
  background: #00a1ad;
}

/* پیام‌ها */
.vp-auth__message {
  margin-top: 1rem;
  text-align: center;
  color: #007185;
}

/* 🌙 دارک‌مود */
html[data-theme='dark'] .vp-auth__info {
  color: #e0e0e0;
}
html[data-theme='dark'] .vp-auth__form-box {
  background: #121212;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}
html[data-theme='dark'] .vp-auth__heading {
  color: #e4e4e4;
}
html[data-theme='dark'] .vp-auth__form input[type="text"] {
  background: #191919;
  color: #e0e0e0;
  border: 1px solid #333;
}
html[data-theme='dark'] .vp-btn--primary {
  background: #00a1ad;
}
html[data-theme='dark'] .vp-btn--primary:hover {
  background: #00b7c4;
}


/* ریسپانسیو */
@media (max-width: 992px) {
  /* دکمه همبرگری */
  .nav__toggle-icon {
    display: flex;
    cursor: pointer;
  }

  /* منوی اصلی (Drawer) */
  .menu {
    position: fixed;                /* 🔹 از container جدا شد */
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;                     /* ← منو نیمه‌عرض */
    max-width: 360px;
    height: 100vh;                  /* 🔹 ارتفاع کامل viewport */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: -4px 0 20px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: var(--z-menu, 1500);
    overflow-y: auto;
  }

  [data-theme="dark"] .menu {
    background: rgba(25, 30, 45, 0.97);
  }

  .menu.active {
    transform: translateX(0);
  }

  /* آیتمهای درون منو */
  .menu__item {
    width: 100%;
  }

  .menu__link {
    display: block;
    text-align: right;
    font-size: 1.05rem;
    padding: 0.6rem 1rem;
    color: var(--on-surface, #111);
  }

  /* فرم جستجو بالای منو */
  .menu__item form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--primary, #0ABEAD);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
  }

  [data-theme="dark"] .menu__item form {
    background: rgba(35, 45, 60, 0.6);
  }

  .menu__item input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: inherit;
  }

  .menu__item input[type="submit"] {
    border: none;
    border-radius: 6px;
    background: var(--primary, #0ABEAD);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .menu__item input[type="submit"]:hover {
    background: var(--accent, #FFB347);
  }

  /* لایه تاریک پشت منو */
  .nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: var(--z-overlay, 1400);
  }

  .nav__overlay.active {
    opacity: 1;
    pointer-events: all;
  }
}
@media (max-width: 768px) {
  section {
    margin-block: 2.5rem;
  }
  .hero__subtitle { font-size: .95rem; }
  .lottery .glass-box { padding: 1.4rem; }
  .featured .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }
  .product-card img {
    height: 180px;
  }
  .product-card h5 {
    font-size: 0.9rem;
  }
  .category-products {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.1rem;
  }
  .cat-item {
    padding: 1rem;
  }
  .cat-item h5 {
    font-size: 0.95rem;
  }
  .cat-item a {
    font-size: 0.9rem;
  }
  .discount-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .discount-thumb img {
    height: 180px;
  }
  .discount-info {
    padding: 0.8rem 1rem;
  }
  .gallery-item {
    flex: 0 0 70%;
    aspect-ratio: 3/2;
  }
  .gallery-overlay h6 {
    font-size: 0.9rem;
  }
  .popular-grid {
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  }
  .product-thumb {
    height: 180px;
  }
  .simple-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
  }
  .mini-product {
    font-size: 0.9rem;
    padding: 0.9rem 1rem;
  }
  .magazine {
    padding: 60px 0;
    margin: 40px auto;
  }
  .magazine .section-head__title {
    font-size: 1.9rem;
  }
  .vp-cat-toggle { display: block; }
  .vp-category-scroll {
    display: none;
    flex-direction: column;
    gap: .25rem;
  }
  .vp-category-scroll.open { display: flex; }
    .about__links-wrapper { flex-direction: column; }
    .profile-wrapper {
    grid-template-columns: 1fr;
  }
    .vp-search__layout {
    grid-template-columns: 1fr;
  }
    .footer__wrapper {
    flex-direction: column;
    gap: 0.8rem;
  }
    .vp-contact__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
     .vp-contact__info {
    align-items: center;
  }
     .vp-editprofile__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
       .vp-editprofile__info { align-items: center; }
  .vp-login__info { align-items: center; }
  .vp-login__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vp-login__form input[type="text"],
  .vp-login__form input[type="email"],
  .vp-login__form input[type="password"] {
    width: 100%; /* در موبایل تمام عرض، چون ستون تکی می‌شود */
  }
  .vp-password__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vp-password__info { align-items: center; }
  .vp-password__form input[type="text"],
  .vp-password__form input[type="password"] {
    width: 100%;
  }
  .vp-reset__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vp-reset__info { align-items: center; }
  .vp-reset__form input[type="password"],
  .vp-reset__form input[type="text"] {
    width: 100%;
  }
  .vp-reset__container { grid-template-columns: 1fr; text-align: center; }
  .vp-reset__form input { width: 100%; }
  .vp-register__container { grid-template-columns: 1fr; text-align: center; }
  .vp-register__form input { width: 100%; }
  .vp-order__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .vp-order__form input {
    width: 100%;
  }
  .vp-auth__container {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .vp-auth__text {
    max-width: 95%;
  }
  .vp-auth__form-box {
    padding: 1.5rem;
  }
  .vp-auth__container {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .vp-auth__form-box {
    padding: 1.5rem;
  }
  .vp-auth__text {
    max-width: 95%;
  }
  .orders-table thead {
    display: none;
  }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td {
    display: block;
    width: 100%;
  }
  .orders-table tr {
    margin-bottom: 1rem;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0.8rem 0.5rem;
    background: #d5d1d1;
  }
  .orders-table td {
    text-align: right;
    padding: 0.3rem 1rem;
    border: none;
    position: relative;
  }
  .orders-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.8rem;
    top: 0;
    font-weight: bold;
    color: #888;
  }

  /* آیتم‌ها (collapsible) */
  .items-row td {
    padding: 0.4rem !important;
  }
  .items-table {
    font-size: 0.85rem;
  }
  .items-table thead {
    display: none;
  }
  .items-table tr {
    display: block;
    border-bottom: 1px solid #444;
    margin-bottom: 0.4rem;
  }
  .items-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.6rem;
  }
  .items-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #999;
  }
}
@media (max-width: 576px) {
  .service, .package { margin-bottom: 2rem; }
  .section-head__title { font-size: 1.4rem; }
  .discounted-products .section-head__title { font-size: 1.7rem; }
  .discount-info { padding: 16px 12px 65px; }
  .buy-now { font-size: .9rem; }
}
@media (max-width: 480px) {
  .gallery-item {
    flex: 0 0 85%;
  }
  .orders-table td,
  .items-table td {
    font-size: 0.8rem;
  }
  .vp-btn-outline {
    padding: 3px 6px;
    font-size: 0.8rem;
  }
}