/* =========================================================================
   pages.css — استایل صفحات فروشگاه/محتوا (مکمل styles.css، از همان توکن‌ها)
   بعد از styles.css و responsive-nav.css لود می‌شود.
   ========================================================================= */

/* ---------- سرصفحه + بردکرامب ---------- */
input::placeholder {font-size:12px;}
.page-hero { padding: 34px 0 6px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { width: 15px; height: 15px; opacity: .65; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.page-hero h1 { font-size: clamp(26px, 4vw, 40px); color: var(--text-strong); margin: 0 0 8px; letter-spacing: -1px; }
.page-hero p { color: var(--muted); max-width: 640px; line-height: 1.9; margin: 0; }

/* ---------- نوار ابزار فروشگاه ---------- */
.content { padding: 12px 0 56px; }
.shop-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0 16px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px;margin-bottom: 15px; }
.chip { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .18s var(--ease); }
.chip:hover { border-color: var(--accent); }
.chip.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; border-color: transparent; }
.shop-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.shop-sort select { background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.shop-count { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* ---------- شبکهٔ محصولات ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.product-link { text-decoration: none; color: inherit; display: block; }
.shop-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 50px 0; }
@media (max-width: 560px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- صفحات محتوا ---------- */
.prose { max-width: 760px; color: var(--text); line-height: 2; font-size: 15.5px; }
.prose h2 { color: var(--text-strong); font-size: 22px; margin: 30px 0 12px; }
.prose p { margin: 0 0 14px; color: var(--muted); }
.article-hero { max-width: none; padding-bottom: 0; }
.article-hero .breadcrumb { margin-bottom: 18px; }
.article-hero__media { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(390px, 48vw, 560px); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 26px; background: #241914; box-shadow: 0 24px 58px -38px rgba(31, 16, 8, .65); }
.article-hero__media > img { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.article-hero__media::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(12deg, rgba(8, 7, 6, .94) 12%, rgba(8, 7, 6, .68) 48%, rgba(8, 7, 6, .12) 88%); }
.article-hero__media--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 82%, #241914), color-mix(in srgb, var(--accent) 58%, #17110e)); }
.article-hero__body { width: min(860px, 100%); padding: clamp(25px, 4.2vw, 48px); }
.article-hero__body .kicker { color: #f3ddc6; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.article-hero__body h1 { margin: 14px 0 9px; color: #fff; font-size: clamp(29px, 4.2vw, 48px); line-height: 1.45; letter-spacing: -.7px; text-shadow: 0 3px 18px rgba(0, 0, 0, .28); }
.article-hero__body > p { max-width: 760px; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.95; }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.article-hero__body .article-meta { gap: 8px; margin-top: 20px; color: rgba(255, 255, 255, .86); }
.article-hero__body .article-meta span { min-height: 34px; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.article-cover { overflow: hidden; margin: 6px 0 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.article-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.article-page { padding-top: 24px; }
.article-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.article-content-box { min-width: 0; padding: 28px clamp(20px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface-solid); box-shadow: 0 18px 44px -34px rgba(24, 12, 6, .48); }
.article-content-box .prose { max-width: none; }
.article-content-box .prose h2 { position: relative; scroll-margin-top: 92px; margin-top: 34px; padding-inline-start: 17px; }
.article-content-box .prose h2:first-child { margin-top: 5px; }
.article-content-box .prose h2::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .25em; width: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); }
.article-content-box .prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article-content-box .prose a { color: var(--accent-strong); }
.article-mobile-bar { display: none; }
.article-sidebar { position: sticky; top: 20px; display: grid; align-content: start; gap: 14px; max-height: calc(100vh - 40px); overflow: auto; }
.article-sidebar__head { display: none; }
.article-sidebar-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); box-shadow: 0 14px 34px -30px rgba(24, 12, 6, .5); }
.article-sidebar-card > h2 { margin: 0 0 13px; color: var(--text-strong); font-size: 15px; }
.article-toc { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.article-toc a { display: block; padding: 8px 10px; border-inline-start: 2px solid transparent; border-radius: var(--radius-sm); color: var(--muted); font-size: 12.5px; line-height: 1.7; text-decoration: none; transition: .16s var(--ease); }
.article-toc a:hover { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.article-toc a.active { border-inline-start-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--text-strong); font-weight: 800; }
.article-latest { display: grid; gap: 11px; }
.article-latest a { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .16s var(--ease); }
.article-latest img, .article-latest__placeholder { width: 68px; height: 52px; border-radius: var(--radius-sm); background: var(--surface-solid); object-fit: cover; }
.article-latest__placeholder { display: grid; place-items: center; color: var(--muted); }
.article-latest__placeholder svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.article-latest strong { color: var(--text); font-size: 12px; line-height: 1.7; transition: color .16s; }
.article-latest a:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.article-latest a:hover strong { color: var(--accent-strong); }
.article-sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  body.is-article-sidebar-open { overflow: hidden; }
  .article-layout { display: block; }
  .article-content-box { padding-top: 0; }
  .article-mobile-bar { position: sticky; z-index: 15; top: 8px; display: flex; margin: 0 -10px 18px; padding: 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
  .article-sidebar-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-solid); color: var(--text); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
  .article-sidebar-toggle > span { display: grid; gap: 3px; width: 18px; }
  .article-sidebar-toggle i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .article-sidebar { position: fixed; z-index: 1002; top: 0; right: 0; width: min(86vw, 340px); height: 100dvh; max-height: none; padding: 16px; overflow-y: auto; background: var(--surface-solid); box-shadow: var(--shadow-float); transform: translateX(105%); visibility: hidden; transition: transform .22s var(--ease), visibility .22s; }
  .article-layout.is-sidebar-open .article-sidebar { transform: translateX(0); visibility: visible; }
  .article-sidebar__head { display: flex; align-items: center; justify-content: space-between; color: var(--text-strong); }
  .article-sidebar__head button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font: inherit; font-size: 22px; cursor: pointer; }
  .article-sidebar-backdrop { position: fixed; z-index: 1001; inset: 0; display: block; border: 0; background: rgba(12, 8, 5, .58); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .article-layout.is-sidebar-open .article-sidebar-backdrop { opacity: 1; visibility: visible; }
}

@media (max-width: 560px) {
  .article-hero__media { min-height: 430px; border-radius: 20px; }
  .article-hero__body { padding: 22px 18px; }
  .article-hero__body h1 { font-size: 28px; }
  .article-hero__body > p { font-size: 13.5px; }
  .article-cover { margin-bottom: 16px; }
  .article-content-box { padding-inline: 16px; }
  .article-content-box .prose { font-size: 14.5px; }
  .article-content-box .prose h2 { font-size: 20px; }
}
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 26px 0; }
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.value-card svg { width: 30px; height: 30px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin: 12px 0 6px; color: var(--text-strong); font-size: 16px; }
.value-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 26px 0; }
.stat { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 12px; }
.stat b { display: block; font-size: 28px; color: var(--accent-strong); }
.stat span { font-size: 13px; color: var(--muted); }

/* ---------- تماس با ما ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 840px) { .contact-grid { grid-template-columns: 1.1fr .9fr; } }
.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea ,.ss-main { width: 100%; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font: inherit; font-size: 14px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 120px; resize: vertical; }
.contact-honeypot { position: absolute !important; inset-inline-start: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
[data-contact-done] { margin: 14px 0 0; color: var(--accent-strong); font-size: 14px; line-height: 1.8; }
[data-contact-done].is-error { color: var(--danger); }
.contact-form .btn-primary:disabled { opacity: .65; cursor: wait; }
.map-card.leaflet-container, .map-card .leaflet-container { width: 100%; height: 100%; }
.contact-map-empty { display: grid; place-items: center; height: 100%; margin: 0; padding: 20px; color: var(--muted); text-align: center; }
.contact-map-marker-wrap { background: transparent; border: 0; }
.contact-map-marker { position: relative; display: block; width: 28px; height: 28px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: var(--accent); box-shadow: 0 5px 16px rgba(0, 0, 0, .35); transform: rotate(-45deg); }
.contact-map-marker::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.field select{
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  color: var(--ui-text);
  cursor: pointer;
  width: 100%;
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23222222'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 12px;

}
html[data-theme="light"] body.app-page .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23222222'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat  !important;
    background-position: left 10px center  !important;
    background-size: 12px  !important;
}
html[data-theme="dark"] body.app-page .field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat  !important;
  background-position: left 10px center  !important;
  background-size: 12px  !important;
}
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: 0; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.info-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.info-card svg { width: 24px; height: 24px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.info-card b { display: block; color: var(--text-strong); font-size: 14px; }
.info-card span { color: var(--muted); font-size: 13px; }

/* =========================================================================
   عناصر تزئینی مشترک (قابل استفاده در همهٔ صفحات)
   ========================================================================= */

/* بردکرامب حرفه‌ای‌تر */
.breadcrumb a { display: inline-flex; align-items: center; gap: 5px; }
.breadcrumb .cur { color: var(--accent-strong); font-weight: 600; }

/* کیکر، کلمهٔ گرادیانی، خط تأکید */
.kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--line-strong); color: var(--accent-strong); font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.kicker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grad { background: linear-gradient(90deg, var(--accent-strong), var(--accent-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent-rule { width: 60px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); margin: 16px 0; }

/* ===== شِل A — باندِ نرم که به بدنه محو می‌شود + کارتِ یکپارچه ===== */
.pg-band { position: relative; overflow: hidden; padding: 42px 0 66px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-raised)) 0%, var(--bg) 100%); }
.pg-band__bean { position: absolute; inset-block-start: -34px; inset-inline-start: -46px; width: 220px; height: 220px; color: var(--accent); opacity: .05; transform: rotate(-12deg); pointer-events: none; }
.pg-band__bean svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .5; }
.pg-band h1 { position: relative; font-size: clamp(27px, 4.4vw, 40px); color: var(--text-strong); letter-spacing: -1px; margin-bottom: 8px; }
.pg-band p { position: relative; color: var(--muted); max-width: 600px; font-size: 15px; }
.pg-card { position: relative; margin: -48px 0 54px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 24px; padding: 34px 32px; box-shadow: 0 18px 46px rgba(0, 0, 0, .2); }

/* درباره ما — تصویر تمام‌عرض با خوانایی ثابت در هر دو پوسته */
body[data-page="about"] .about-hero {
  isolation: isolate;
  display: flex;
  align-items: flex-end;
/*  min-height: clamp(430px, 52vw, 610px);*/
  padding: 0;
  border-bottom: 0;
  background: #21150f;
}
body[data-page="about"] .about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 9, 6, .90) 0%, rgba(15, 9, 6, .68) 48%, rgba(15, 9, 6, .18) 100%),
    linear-gradient(0deg, rgba(15, 9, 6, .62) 0%, transparent 55%);
}
body[data-page="about"] .about-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body[data-page="about"] .about-hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 5vw, 64px) 78px;
}
body[data-page="about"] .about-hero .breadcrumb,
body[data-page="about"] .about-hero .breadcrumb a {
  color: rgba(255, 255, 255, .76);
}
body[data-page="about"] .about-hero .breadcrumb a:hover,
body[data-page="about"] .about-hero .breadcrumb .cur {
  color: #fff;
}
body[data-page="about"] .about-hero .kicker {
  color: #fff3e9;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px);
}
body[data-page="about"] .about-hero h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
body[data-page="about"] .about-hero p {
  color: rgba(255, 255, 255, .82);
  line-height: 2;
}
body[data-page="about"] .about-hero .pg-band__bean {
  color: #fff;
  opacity: .08;
}

@media (max-width: 560px) {
  body[data-page="about"] .about-hero {/* min-height: 470px; */}
  body[data-page="about"] .about-hero::after {
    background: linear-gradient(0deg, rgba(13, 8, 5, .94) 0%, rgba(13, 8, 5, .57) 60%, rgba(13, 8, 5, .18) 100%);
  }
  body[data-page="about"] .about-hero__image { object-position: 58% center; }
  body[data-page="about"] .about-hero__content { padding-block: 28px 70px; }
  body[data-page="about"] .about-hero h1 { font-size: 30px; }
}

/* ===== شِل B — هیروی دوستونه ===== */
.hero-2 { padding: 30px 0; border-block: 1px solid var(--line); background: linear-gradient(160deg, var(--surface-raised), color-mix(in srgb, var(--accent) 6%, var(--bg)) 75%); }
.hero-2__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; }
.hero-2 h1 { font-size: clamp(26px, 4vw, 38px); color: var(--text-strong); letter-spacing: -1px; margin-bottom: 10px; }
.hero-2 p { color: var(--muted); font-size: 15px; }
.hero-2__media { height: 210px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line-strong); }
.hero-2__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .hero-2__grid { grid-template-columns: 1fr; } .hero-2__media { height: 160px; } }

/* ===== شِل E — هیروی تصویریِ سینمایی + کارت ===== */
.cine-hero { position: relative; height: 280px; overflow: hidden; }
.cine-hero img { width: 100%; height: 100%; object-fit: cover; }
.cine-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), rgba(8,7,6,.2) 55%), linear-gradient(270deg, rgba(8,7,6,.5), transparent 60%); }
.cine-cap { position: absolute; inset-block-end: 22px; inset-inline: 0; z-index: 1; }
.cine-cap h1 { font-size: clamp(26px, 4.6vw, 40px); color: #fff4ee; letter-spacing: -1px; }
.cine-cap .breadcrumb, .cine-cap .breadcrumb a { color: #d8c6ad; }
.cine-cap .breadcrumb .cur { color: #fff4ee; }
.cine-card { position: relative; margin: -30px 0 50px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 26px; padding: 30px; box-shadow: var(--shadow-soft); }

/* محو-ظاهرشدن هنگام اسکرول */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* بنر تصویری بالای صفحه */
.hero-banner { position: relative; height: 240px; border-radius: var(--radius-xl); overflow: hidden; margin: 12px 0 8px; border: 1px solid var(--line); }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; }
.hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), transparent 62%), linear-gradient(270deg, color-mix(in srgb, var(--bg) 78%, transparent), transparent 58%); }
.hero-banner__cap { position: absolute; inset-block-end: 18px; inset-inline-start: 22px; z-index: 1; color: var(--text-strong); font-weight: 800; font-size: 20px; letter-spacing: -.5px; }
.hero-banner__cap small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 4px; }

/* سرتیتر تزئینی با خط و آیکون */
.section-head { display: flex; align-items: center; gap: 12px; margin: 36px 0 18px; }
.section-head svg { width: 26px; height: 26px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.section-head h2 { margin: 0; font-size: 22px; color: var(--text-strong); white-space: nowrap; }
.section-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

/* عنوان با خط گرادیانی زیر نوشته (از deco-samples) */
.h-accent { position: relative; display: inline-block; }
.h-accent > span { color: transparent; background: linear-gradient(90deg, var(--accent-strong), var(--accent-deep)); -webkit-background-clip: text; background-clip: text; }
.h-accent::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -8px; width: 60px; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }

/* جداکنندهٔ دانهٔ قهوه */
.deco-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px auto; color: color-mix(in srgb, var(--accent) 60%, transparent); }
.deco-divider::before, .deco-divider::after { content: ""; height: 1px; width: min(160px, 30vw); background: linear-gradient(90deg, transparent, var(--line-strong)); }
.deco-divider::before { transform: scaleX(-1); }
.deco-divider svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* بلوک نقل‌قول */
.deco-quote { position: relative; margin: 26px 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--accent) 5%, transparent); overflow: hidden; }
.deco-quote::before { content: "\201D"; position: absolute; top: -18px; inset-inline-start: 16px; font-size: 110px; line-height: 1; color: color-mix(in srgb, var(--accent) 35%, transparent); font-family: Georgia, serif; }
.deco-quote p { position: relative; margin: 0; font-size: 18px; line-height: 2; color: var(--text-strong); }
.deco-quote cite { display: block; margin-top: 12px; color: var(--accent); font-size: 13px; font-style: normal; }

/* بَج آیکون برای کارت ارزش‌ها */
.vc-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-deep) 14%, transparent)); }
.vc-ic svg { width: 24px; height: 24px; color: var(--accent-strong); }
.value-card { position: relative; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.value-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }

/* کارت نقشه (تماس با ما) */
.map-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-solid); aspect-ratio: 16 / 11; }
.map-card svg.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin { position: absolute; inset-block-start: 44%; inset-inline-start: 50%; transform: translate(-50%, -100%); width: 36px; height: 36px; color: var(--accent); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.map-pin svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.map-badge { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-solid) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-strong); font-size: 12px; color: var(--text); }
.map-badge svg { width: 15px; height: 15px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- مجله / بلاگ ---------- */
/* ---- بلاگ: سبک سردبیری (مقاله شاخص + گرید کارت) ---- */
.blog-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: .2px; }
.blog-cat::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.blog-cat svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.blog-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); }
.blog-meta span { display: inline-flex; align-items: center; gap: 5px; }
.blog-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.blog-featured { position: relative; display: grid; overflow: hidden; border-radius: 24px; border: 1px solid var(--line-strong); min-height: 400px; text-decoration: none; color: inherit; }
.blog-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-featured:hover img { transform: scale(1.03); }
.blog-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(12deg, rgba(8, 7, 6, .92) 22%, rgba(8, 7, 6, .45) 55%, transparent 85%); }
.blog-featured__body { position: relative; z-index: 2; align-self: end; padding: 30px; max-width: 640px; }
.blog-featured__body .blog-cat { color: #ecd9bb; }
.blog-featured__body .blog-cat::before { background: linear-gradient(90deg, #ecd9bb, transparent); }
.blog-featured__body h2 { margin: 12px 0 10px; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.5; color: #fff8ec; }
.blog-featured__body p { margin: 0 0 16px; color: rgba(245, 236, 221, .82); line-height: 1.9; }
.blog-featured__body .blog-meta { color: rgba(245, 236, 221, .75); }
.blog-featured__body .blog-meta > span { min-height: 32px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .09); backdrop-filter: blur(7px); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; margin-top: 22px; }
.blog-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.blog-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .55); }
.blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__body { display: flex; flex-direction: column; gap: 9px; padding: 18px; flex: 1; }
.blog-card__body h3 { margin: 0; color: var(--text-strong); font-size: 16.5px; line-height: 1.7; }
.blog-card__body p { margin: 0; color: var(--muted); font-size: 13.2px; line-height: 1.9; flex: 1; }
.blog-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-top: 12px; border-top: 1px solid var(--line); }
.blog-card__foot .blog-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; }
.blog-card__foot .blog-meta > span { justify-content: center; min-width: 0; min-height: 34px; padding: 7px 8px; border-radius: 10px; background: var(--surface-raised); white-space: nowrap; }
.blog-card__foot .blog-more { grid-column: 2; }
.blog-more { display: inline-flex; align-items: center; gap: 5px; font-size: 12.8px; font-weight: 700; color: var(--accent); }
.blog-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.blog-card:hover .blog-more svg { transform: translateX(-4px); }

/* =========================================================================
   سبد خرید، تسویه و موفقیت سفارش
   ========================================================================= */
.product-card .add-cart { margin-top: 14px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .18s var(--ease); }
.product-card .add-cart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.product-card .add-cart:hover { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; border-color: transparent; }
.product-card .add-cart.added { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }

.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 880px) { .cart-layout, .checkout-layout { grid-template-columns: 1.6fr .9fr; } }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; }
.cart-item__img { width: 76px; height: 76px; border-radius: var(--radius-md); object-fit: cover; }
.cart-item h3 { font-size: 15px; color: var(--text-strong); margin: 0 0 3px; }
.cart-item .ci-meta { font-size: 12px; color: var(--muted); }
.cart-item .ci-price { color: var(--accent-strong); font-weight: 700; font-size: 14px; margin-top: 6px; }
.ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.qty button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qty span { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; }
.ci-remove { background: none; border: 0; color: var(--danger); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ci-remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cart-summary { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 20px; position: sticky; top: 20px; }
.cart-summary h3 { font-size: 16px; color: var(--text-strong); margin: 0 0 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--muted); padding: 8px 0; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; color: var(--text-strong); font-size: 16px; font-weight: 700; }
.sum-row.total b { color: var(--accent-strong); }
.cart-summary .btn-primary { margin-top: 16px; text-decoration: none; }
.summary-note { margin-top: 12px; font-size: 12px; color: var(--muted-2); text-align: center; }

.cart-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.cart-empty svg { width: 60px; height: 60px; color: var(--muted-2); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.cart-empty h3 { color: var(--text-strong); font-size: 18px; margin: 0 0 6px; }
.cart-empty .btn-primary { display: inline-flex; width: auto; margin-top: 18px; padding-inline: 26px; text-decoration: none; }

.co-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.co-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.co-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.co-item .co-name { flex: 1; color: var(--text); }
.co-qty { color: var(--muted-2); font-size: 12px; }

.success-box { max-width: 520px; margin: 30px auto 60px; text-align: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); padding: 40px 28px; }
.success-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-strong); }
.success-ic svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.success-box h1 { font-size: 24px; color: var(--text-strong); margin: 0 0 8px; }
.success-box p { color: var(--muted); margin: 0 0 6px; }
.success-order { display: inline-block; margin: 14px 0; padding: 8px 18px; border-radius: var(--radius-pill); background: var(--surface-solid); border: 1px solid var(--line); color: var(--accent-strong); font-weight: 700; }
.success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.success-actions a { padding: 12px 22px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: 14px; }
.success-actions .primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; }
.success-actions .ghost { border: 1px solid var(--line-strong); color: var(--text); }

/* دسته‌بندی‌های فروشگاه به‌صورت اسلایدر افقی در موبایل */
@media (max-width: 760px) {
  .shop-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip { flex: 0 0 auto; }
  .shop-sort { justify-content: space-between; }
  .shop-sort select { flex: 1; }
}

/* =========================================================================
   تسویه به سبک tanura: گیت ورود، پنل آدرس، نقشهٔ دمو
   ========================================================================= */
.auth-gate { text-align: center; max-width: 460px; margin: 20px auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); padding: 40px 28px; }
.auth-gate__ic { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }
.auth-gate__ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-gate h3 { color: var(--text-strong); font-size: 19px; margin: 0 0 8px; }
.auth-gate p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.auth-gate .btn-primary { max-width: 280px; margin: 0 auto; }

.checkout-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cp-head > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 600; font-size: 15px; }
.cp-head > span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); }
.cp-add { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 12px; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.cp-add:hover { border-color: var(--accent); color: var(--accent); }
.cp-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.addr-list { display: flex; flex-direction: column; gap: 10px; }
.addr-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); }
.addr-item:hover { border-color: var(--line-strong); }
.addr-item.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.addr-item input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.addr-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--glass); color: var(--accent); flex: none; }
.addr-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.addr-body { display: flex; flex-direction: column; gap: 3px; }
.addr-body b { color: var(--text-strong); font-size: 14px; }
.addr-body small { color: var(--muted); font-size: 12.5px; }
.addr-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px; }
.addr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.addr-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.addr-chips .chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* استایل انتخابگر نقشه (.demo-map/.map-pin2/.map-hint2) به css/responsive-nav.css منتقل شد
   تا مودال ورود/آدرس در صفحاتی که pages.css را لود نمی‌کنند (مثل صفحه اصلی) هم درست باشد. */

/* =========================================================================
   فروشگاه: چیدمان فیلتر حرفه‌ای + نوار سبد ثابت
   ========================================================================= */
.shop-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 22px; align-items: start; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.shop-bar .shop-count { margin: 0; }
.filter-toggle { display: none; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.filter-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.shop-filters { position: sticky; top: 18px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.filters-head { display: none; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.filters-head span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 700; }
.filters-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--accent); }
.filters-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--glass); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.filters-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.filter-group h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-strong); }
.filter-group select, .filter-search { width: 100%; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font: inherit; font-size: 13px; }
.filter-group select:focus, .filter-search:focus { outline: none; border-color: var(--accent); }
.filter-price-slider { height: 6px; margin: 18px 9px 16px; border: 0; border-radius: 6px; background: var(--line-strong); box-shadow: none; }
.filter-price-slider .noUi-connect { background: var(--accent); }
.filter-price-slider .noUi-handle { width: 20px; height: 20px; top: -7px; inset-inline-end: -10px; border: 3px solid var(--surface-solid); border-radius: 50%; background: var(--accent); box-shadow: 0 2px 7px #0004; cursor: grab; }
.filter-price-slider .noUi-handle:active { cursor: grabbing; }
.filter-price-slider .noUi-handle::before, .filter-price-slider .noUi-handle::after { display: none; }
.filter-price-slider .noUi-touch-area { border-radius: 50%; }
.filter-price-slider .noUi-handle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }
.filter-price-manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.filter-price-manual[hidden] { display: none; }
.filter-price-manual label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.filter-price-manual input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-solid); color: var(--text); font: inherit; font-size: 11.5px; }
.filter-price-manual input:focus { outline: none; border-color: var(--accent); }
.filter-check-list { max-height: 280px; overflow-y: auto; padding-inline-end: 2px; scrollbar-width: thin; }
.filter-price-val { margin-top: 8px; font-size: 12.5px; color: var(--accent-strong); font-weight: 600; }
.filter-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--text); cursor: pointer; }
.filter-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.rating-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-chip { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.mini-chip svg { width: 13px; height: 13px; fill: currentColor; stroke: none; color: var(--gold); }
.mini-chip.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; border-color: transparent; }
.mini-chip.is-active svg { color: #1a120b; }
.filter-reset { background: none; border: 0; color: var(--danger); font: inherit; font-size: 13px; cursor: pointer; text-align: start; padding: 0; }
.filter-reset:hover { text-decoration: underline; }

.filters-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.filters-backdrop[hidden] { display: none; }

.cart-bar { position: fixed; z-index: 75; inset-inline: 16px; bottom: 16px; max-width: 700px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; text-decoration: none; box-shadow: 0 16px 40px rgba(0, 0, 0, .42); }
.cart-bar[hidden] { display: none; }
.cart-bar__ic { position: relative; display: grid; place-items: center; }
.cart-bar__ic > svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-bar__count { position: absolute; top: -7px; inset-inline-end: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #1a120b; color: var(--accent-strong); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cart-bar__text { font-weight: 700; font-size: 14px; }
.cart-bar__total { margin-inline-start: auto; font-weight: 800; font-size: 15px; }
.cart-bar__go { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.has-cart-bar { padding-bottom: 92px; }

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .filters-head { display: flex; }
  /* شیت پایین (هم‌سبک با منوی حساب) */
  .shop-filters { position: fixed; inset-inline: 0; inset-block-end: 0; top: auto; z-index: 90; width: auto; max-height: 82vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); transition: transform .3s var(--ease); overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .shop-filters::before { content: ""; display: block; width: 42px; height: 5px; border-radius: 5px; background: var(--line-strong); margin: 4px auto 10px; }
  .shop-filters.is-open { transform: none; }
  body.is-filters-open { overflow: hidden; }
}
@media (max-width: 840px) {
  .cart-bar { bottom: 82px; }
  body.has-cart-bar { padding-bottom: 150px; }
}

/* =========================================================================
   سبد + تسویهٔ ادغام‌شده در یک صفحه
   ========================================================================= */
.cart-checkout { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 20px; align-items: start; }
.cart-main { display: flex; flex-direction: column; gap: 16px; }
/* فاکتور در دسکتاپ چسبان است و همراه اسکرول پایین می‌آید؛ اگر بلندتر از صفحه شد داخل خودش اسکرول می‌خورد */
.invoice { position: sticky; top: 18px; align-self: start; max-height: calc(100vh - 36px); overflow: auto; }
.invoice::-webkit-scrollbar { width: 6px; }
.invoice::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.invoice-head { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.invoice-head .invoice-badge { color: var(--muted); font-size: 12px; font-weight: 700; }
.invoice-head .invoice-badge svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 860px) { .cart-checkout { grid-template-columns: 1fr; } .invoice { position: static; max-height: none; overflow: visible; } }

.ship-options { display: flex; flex-direction: column; gap: 10px; }
.ship-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); }
.ship-opt:hover { border-color: var(--line-strong); }
.ship-opt.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ship-opt input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.ship-opt span { flex: 1; }
.ship-opt b { color: var(--text-strong); font-size: 13.5px; font-weight: 600; }
.ship-opt em { color: var(--accent-strong); font-style: normal; font-weight: 700; font-size: 13px; }

.discount-box { display: flex; gap: 8px; margin: 14px 0 4px; }
.discount-box input { flex: 1; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font: inherit; font-size: 13px; }
.discount-box input:focus { outline: none; border-color: var(--accent); }
.discount-box button { padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--glass); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.discount-box button:hover { border-color: var(--accent); color: var(--accent); }
.discount-msg { font-size: 12px; min-height: 15px; margin: 0 0 6px; color: var(--muted-2); }
.sum-row.disc, .sum-row.disc span { color: #89b06f; }
.cart-wallet-use { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); }
.cart-wallet-use__info { display: grid; gap: 3px; min-width: 0; }
.cart-wallet-use__info span { color: var(--muted); font-size: 11.5px; }
.cart-wallet-use__info strong { color: var(--text-strong); font-size: 13px; }
.cart-wallet-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.cart-wallet-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cart-wallet-switch__track { width: 44px; height: 25px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass); transition: .18s ease; }
.cart-wallet-switch__track::after { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); transition: .18s ease; }
.cart-wallet-switch input:checked + .cart-wallet-switch__track { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cart-wallet-switch input:checked + .cart-wallet-switch__track::after { background: var(--accent); transform: translateX(-19px); }
.cart-wallet-switch input:focus-visible + .cart-wallet-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cart-wallet-switch input:disabled + .cart-wallet-switch__track { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   Foundation داشبوردها: خریدار، فروشنده، ادمین و ثبت‌نام فروشنده
   ========================================================================= */
.dashboard-page main { padding-bottom: 58px; }
.dashboard-hero {
  padding: 34px 0 18px;
  display: grid;
  gap: 16px;
}
.dashboard-hero--split {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: end;
}
.dashboard-hero h1 {
  max-width: 780px;
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.45;
}
.dashboard-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
.dashboard-stat-card {
  min-height: 150px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.dashboard-stat-card strong {
  color: var(--accent-strong);
  font-size: 30px;
  font-weight: 900;
}
.dashboard-stat-card span {
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
}
.dashboard-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 12px;
}
.dashboard-layout--single { grid-template-columns: minmax(0, 1fr); }
.dashboard-nav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.dashboard-nav a:hover {
  background: var(--glass);
  color: var(--text-strong);
}
.dashboard-nav svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.dashboard-stack {
  display: grid;
  gap: 16px;
}
.dashboard-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}
.dashboard-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-card__head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #7bbf76 16%, transparent);
  border: 1px solid color-mix(in srgb, #7bbf76 34%, transparent);
  color: color-mix(in srgb, #9fe096 86%, var(--text));
  font-size: 12px;
  font-weight: 800;
  width: fit-content;
}
.status-pill--warn {
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border-color: color-mix(in srgb, var(--gold) 32%, transparent);
  color: var(--gold);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.metric-grid > div {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.metric-grid span {
  color: var(--muted);
  font-size: 12px;
}
.metric-grid b {
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 900;
}
.table-lite {
  display: grid;
  gap: 10px;
}
.table-lite > div {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(90px, .8fr) minmax(110px, .8fr) minmax(120px, .8fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.table-lite b,
.table-lite strong {
  color: var(--text-strong);
  font-size: 13px;
}
.table-lite span,
.table-lite em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.mini-card-grid a {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.mini-card-grid svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.mini-card-grid span {
  color: var(--text-strong);
  font-weight: 800;
}
.mini-card-grid small { color: var(--muted); }
.form-grid.accessorynewform button{    margin-top: 18px;}
.form-grid.accessorynewform {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .form-grid.accessorynewform {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .form-grid.accessorynewform button {
    margin-top: 0px;
    margin-bottom: 18px;
  }
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}
.field--wide { grid-column: 1 / -1; }
.account-profile-location { margin-top: 18px; }
.account-profile-location > label {
  display: block;
  margin-bottom: 8px;
}
.account-profile-location [data-profile-location-status] {
  display: block;
  margin-top: 8px;
}
.field span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
}
.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.upload-grid > div {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.upload-grid svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.upload-grid b { color: var(--text-strong); }
.upload-grid span {
  color: var(--muted);
  font-size: 12px;
}
.review-lite {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.review-lite svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
  fill: currentColor;
  stroke: none;
}
.review-lite p { margin: 0; line-height: 1.9; }

@media (max-width: 860px) {
  .dashboard-hero--split,
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dashboard-nav::-webkit-scrollbar { display: none; }
  .table-lite > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .form-grid,
  .upload-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   پنل مشتری حرفه‌ای
   ========================================================================= */
.account-pro {
  --account-green: #79b78a;
  --account-blue: #82a9d8;
  --account-rose: #d88989;
}
.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: stretch;
  padding: 34px 0 18px;
}
.account-hero__copy {
  min-height: 330px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 66%, transparent)),
    url("../assets/images/account-coffee.jpg") center / cover;
  box-shadow: var(--shadow-card);
}
.account-hero__copy h1 {
  max-width: 710px;
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.45;
}
.account-hero__copy p {
  max-width: 640px;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  line-height: 2;
}
.account-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.account-cta {
  width: auto;
  min-width: 150px;
  padding-inline: 24px;
}
.account-cta svg,
.account-ghost svg { width: 18px; height: 18px; }
.account-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-solid) 64%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: 14px;
}
.loyalty-card {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 30% 0, color-mix(in srgb, var(--gold) 34%, transparent), transparent 36%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-solid));
  box-shadow: var(--shadow-card);
}
.loyalty-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -55px;
  inset-block-end: -72px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 34px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.loyalty-card__top,
.loyalty-card__meta {
  position: relative;
  z-index: 1;
}
.loyalty-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold);
  font-weight: 900;
}
.loyalty-card__top svg {
  width: 34px;
  height: 34px;
}
.loyalty-card strong {
  position: relative;
  z-index: 1;
  color: var(--text-strong);
  font-size: 34px;
  font-weight: 950;
}
.loyalty-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: 13px;
}
.loyalty-progress {
  position: relative;
  z-index: 1;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 54%, transparent);
  border: 1px solid var(--line);
}
.loyalty-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--account-green));
}
.loyalty-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.loyalty-card__meta div {
  padding: 11px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass);
  text-align: center;
}
.loyalty-card__meta b {
  display: block;
  color: var(--text-strong);
  font-size: 17px;
}
.loyalty-card__meta small {
  color: var(--muted);
  font-size: 11px;
}
.account-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
  padding: 10px 0 58px;
}
.account-sidebar {
  position: sticky;
  top: 18px;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.account-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.account-avatar img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
}
.account-avatar b,
.account-avatar span {
  display: block;
}
.account-avatar b {
  color: var(--text-strong);
  font-size: 14px;
}
.account-avatar span {
  direction: ltr;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.account-sidebar nav {
  display: grid;
  gap: 5px;
  padding: 12px;
}
.account-sidebar nav a {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.account-sidebar nav a:hover,
.account-sidebar nav a.is-active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.account-sidebar svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.account-main {
  display: grid;
  gap: 18px;
}
.account-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.account-metrics article {
  min-height: 132px;
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 64%),
    var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}
.metric-icon svg { width: 22px; height: 22px; }
.account-metrics small {
  color: var(--muted);
  font-size: 12px;
}
.account-metrics strong {
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 950;
}
.account-metrics em {
  color: var(--account-green);
  font-style: normal;
  font-size: 12px;
}
.account-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 18px;
}
.account-grid--three {
  grid-template-columns: .9fr 1.05fr 1.05fr;
}
.account-panel {
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.account-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.account-panel h2 {
  margin: 0 0 4px;
  color: var(--text-strong);
  font-size: 17px;
}
.account-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.spend-chart {
  height: 238px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 12px;
  padding-top: 24px;
}
.spend-chart span {
  position: relative;
  min-height: 34px;
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.spend-chart span:nth-child(2n) {
  background: linear-gradient(180deg, var(--account-blue), var(--accent-deep));
}
.spend-chart b {
  position: absolute;
  inset-block-end: -27px;
  inset-inline: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  font-weight: 700;
}
.live-order {
  display: grid;
  align-content: start;
}
.order-product {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
}
.order-product img,
.product-mini img,
.roaster-mini img {
  object-fit: cover;
  border: 1px solid var(--line);
}
.order-product img {
  width: 74px;
  height: 74px;
  border-radius: 18px;
}
.order-product b,
.order-product span {
  display: block;
}
.order-product b {
  color: var(--text-strong);
  font-size: 14px;
}
.order-product span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.order-product strong {
  color: var(--accent-strong);
  font-size: 13px;
  white-space: nowrap;
}
.order-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 22px 0 2px;
  padding: 0;
  list-style: none;
}
.order-timeline li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}
.order-timeline li::before {
  content: "";
  position: absolute;
  top: 11px;
  inset-inline: 0;
  height: 2px;
  background: var(--line-strong);
}
.order-timeline li:first-child::before { inset-inline-start: 50%; }
.order-timeline li:last-child::before { inset-inline-end: 50%; }
.order-timeline span {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface-solid);
}
.order-timeline .done span,
.order-timeline .active span {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--account-green));
}
.order-timeline .active span {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent);
}
.order-timeline b {
  color: var(--text-strong);
  font-size: 12px;
}
.order-timeline small {
  color: var(--muted);
  font-size: 11px;
}
.address-map {
  position: relative;
  height: 138px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
}
.address-map svg {
  width: 100%;
  height: 100%;
}
.address-map path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.address-map .wide { stroke-width: 4; }
.address-map > span {
  position: absolute;
  inset-inline-start: 48%;
  inset-block-start: 42%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a120b;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.address-map > span svg {
  width: 20px;
  height: 20px;
}
.address-panel > p {
  margin-top: 12px;
  color: var(--text);
  font-size: 13px;
}
.product-mini,
.roaster-mini {
  display: grid;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.product-mini + .product-mini,
.roaster-mini + .roaster-mini { margin-top: 10px; }
.product-mini {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}
.roaster-mini {
  grid-template-columns: 54px minmax(0, 1fr);
}
.product-mini img,
.roaster-mini img,
.roaster-badge {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}
.roaster-badge {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b;
  font-family: Georgia, serif;
  font-weight: 900;
}
.product-mini b,
.product-mini small,
.roaster-mini b,
.roaster-mini small {
  display: block;
}
.product-mini b,
.roaster-mini b {
  color: var(--text-strong);
  font-size: 13px;
}
.product-mini small,
.roaster-mini small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.product-mini strong {
  color: var(--accent-strong);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .account-hero,
  .account-shell,
  .account-grid,
  .account-grid--three {
    grid-template-columns: 1fr;
  }
  .account-sidebar {
    position: static;
  }
  .account-sidebar nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .account-sidebar nav::-webkit-scrollbar { display: none; }
  .account-metrics {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .account-hero__copy {
    min-height: 420px;
    align-content: end;
  }
  .loyalty-card__meta,
  .order-timeline {
    grid-template-columns: 1fr;
  }
  .order-timeline {
    gap: 12px;
  }
  .order-timeline li {
    grid-template-columns: 24px 1fr auto;
    justify-items: start;
    text-align: start;
  }
  .order-timeline li::before {
    display: none;
  }
  .order-product {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .order-product strong {
    grid-column: 2;
  }
  .spend-chart {
    gap: 8px;
  }
}

/* =========================================================================
   Customer Desk v2 - پنل مشتری عملیاتی و حرفه‌ای
   ========================================================================= */
.customer-desk {
  --desk-ok: #7fbd87;
  --desk-info: #7aa7d9;
  --desk-warn: #e0ae67;
  --desk-panel: color-mix(in srgb, var(--surface) 88%, transparent);
  padding-bottom: 62px;
}
.customer-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0 16px;
}
.customer-top h1 {
  margin: 6px 0 4px;
  color: var(--text-strong);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}
.customer-top p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.customer-top__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.desk-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--desk-panel);
  color: var(--text);
}
.desk-icon-btn svg { width: 19px; height: 19px; }
.desk-icon-btn span {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}
.desk-primary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b;
  font-size: 13px;
  font-weight: 900;
}
.desk-primary svg { width: 18px; height: 18px; }
.customer-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.customer-rail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}
.customer-card,
.customer-nav,
.customer-support,
.desk-panel,
.customer-command,
.customer-kpis article {
  border: 1px solid var(--line);
  background: var(--desk-panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.customer-card--profile {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px;
  border-radius: 20px;
}
.customer-avatar {
  position: relative;
}
.customer-avatar[data-avatar-upload] {
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
      border-radius: 27px;
}
.customer-avatar[data-avatar-upload].is-uploading {
  cursor: wait;
  opacity: .65;
}
.customer-avatar img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
}
.is-online {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-end: 2px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface-solid);
  border-radius: 50%;
  background: var(--desk-ok);
}
.customer-card--profile b {
  color: var(--text-strong);
  font-size: 15px;
}
.customer-card--profile small {
  color: var(--muted);
  font-size: 12px;
}
.customer-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}
.customer-level svg { width: 16px; height: 16px; }
.customer-nav {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 20px;
}
.customer-nav a {
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.customer-nav a:hover,
.customer-nav a.is-active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.customer-nav svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.customer-nav em {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #1a120b;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.customer-support {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
}
.customer-support > svg {
  width: 26px;
  height: 26px;
  color: var(--desk-info);
}
.customer-support b {
  color: var(--text-strong);
  font-size: 13px;
}
.customer-support span {
  color: var(--muted);
  font-size: 12px;
}
.customer-support button,
.desk-mini-btn {
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-solid);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
.mb-3{
      margin-bottom: 10px;
}
#uploader-add-btn.btn.btn-primary svg{
fill: lavender;
width: 26px;
height: 26px;
}
#uploader-add-btn.btn.btn-primary
{
  width: 161px;
  background: cornflowerblue;
  color: #fff;
  padding: 6px 6px;
}



.customer-board {
  display: grid;
  gap: 14px;
}
.customer-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}
.customer-search {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
}
.customer-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.customer-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.customer-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
}
.customer-tabs button {
  min-height: 34px;
  padding: 7px 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
.customer-tabs button.is-active {
  background: var(--accent);
  color: #1a120b;
}
.customer-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.customer-kpis article {
  min-height: 124px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border-radius: 18px;
}
.customer-kpis article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
}
.customer-kpis svg { width: 20px; height: 20px; }
.customer-kpis small {
  color: var(--muted);
  font-size: 12px;
}
.customer-kpis strong {
  color: var(--text-strong);
  font-size: 23px;
  font-weight: 950;
}
.customer-kpis i {
  color: var(--muted-2);
  font-style: normal;
  font-size: 11px;
}
.customer-kpis i.up { color: var(--desk-ok); }
.customer-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  gap: 14px;
}
.customer-secondary-grid {
  display: grid;
  grid-template-columns: 1.1fr .95fr .95fr;
  gap: 14px;
}
.desk-panel {
  border-radius: 20px;
  padding: 16px;
}
.desk-panel--tight {
  display: grid;
  gap: 14px;
}
.desk-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.desk-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  margin-bottom: 4px;
}
.desk-panel h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
}
.desk-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--desk-warn) 16%, transparent);
  color: var(--desk-warn);
  border: 1px solid color-mix(in srgb, var(--desk-warn) 28%, transparent);
  font-size: 12px;
  font-weight: 900;
}
.desk-panel__icon {
  width: 30px;
  height: 30px;
  color: var(--gold);
}
.order-focus__body {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-solid);
}
.order-focus__body img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.order-focus__info b,
.order-focus__info span {
  display: block;
}
.order-focus__info b {
  color: var(--text-strong);
  font-size: 15px;
}
.order-focus__info > span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.order-focus__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.order-focus__meta small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--glass);
}
.order-focus__meta svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.order-focus__body strong {
  color: var(--accent-strong);
  font-size: 14px;
  white-space: nowrap;
}
.desk-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 18px 0 14px;
}
.desk-stepper span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.desk-stepper span::before {
  content: "";
  position: absolute;
  top: 9px;
  inset-inline: 0;
  height: 2px;
  background: var(--line-strong);
}
.desk-stepper span:first-child::before { inset-inline-start: 50%; }
.desk-stepper span:last-child::before { inset-inline-end: 50%; }
.desk-stepper i {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface-solid);
}
.desk-stepper .done i,
.desk-stepper .active i {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--desk-ok));
}
.desk-stepper .active i {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.desk-stepper .done,
.desk-stepper .active { color: var(--text-strong); }
.order-focus__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-focus__actions a,
.order-focus__actions button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-solid);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
.order-focus__actions a:first-child {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}
.reward-ring {
  --p: 0;
  width: 156px;
  height: 156px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface-solid) 0 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line-strong) 0);
  text-align: center;
}
.reward-ring strong {
  color: var(--text-strong);
  font-size: 26px;
  font-weight: 950;
}
.reward-ring span {
  width: 92px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.reward-lines {
  display: grid;
  gap: 8px;
}
.reward-lines div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.reward-lines span {
  color: var(--muted);
  font-size: 12px;
}
.reward-lines b {
  color: var(--text-strong);
  font-size: 12px;
}
.reorder-list,
.roaster-feed {
  display: grid;
  gap: 10px;
}
.reorder-list a,
.roaster-feed a {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-solid);
}
.reorder-list a {
  grid-template-columns: 54px minmax(0, 1fr) auto 28px;
}
.roaster-feed a {
  grid-template-columns: 54px minmax(0, 1fr);
}
.reorder-list img,
.roaster-feed img,
.roaster-feed i {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.reorder-list img,
.roaster-feed img {
  object-fit: cover;
}
.reorder-list b,
.reorder-list small,
.roaster-feed b,
.roaster-feed small {
  display: block;
}
.reorder-list b,
.roaster-feed b {
  color: var(--text-strong);
  font-size: 13px;
}
.reorder-list small,
.roaster-feed small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}
.reorder-list em {
  color: var(--accent-strong);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.reorder-list > a > svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 10px;
  color: #1a120b;
  background: var(--accent);
}
.address-desk__map {
  position: relative;
  height: 118px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
}
.address-desk__map svg {
  width: 100%;
  height: 100%;
}
.address-desk__map path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
}
.address-desk__map .main-road { stroke-width: 4; }
.address-desk__map span {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 42%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a120b;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.address-desk__map span svg {
  width: 18px;
  height: 18px;
}
.address-desk p {
  margin: 12px 0 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.8;
}
.delivery-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--desk-info) 12%, transparent);
  color: var(--desk-info);
  font-size: 12px;
  font-weight: 850;
}
.delivery-note svg {
  width: 15px;
  height: 15px;
}
.roaster-feed i {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b;
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1040px) {
  .customer-layout,
  .customer-main-grid,
  .customer-secondary-grid {
    grid-template-columns: 1fr;
  }
  .customer-rail {
    position: static;
  }
  .customer-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .customer-nav::-webkit-scrollbar { display: none; }
  .customer-card--profile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    text-align: start;
  }
  .customer-card--profile small { grid-column: 2; }
}
@media (max-width: 760px) {
  .customer-top,
  .customer-command {
    grid-template-columns: 1fr;
    display: grid;
    align-items: stretch;
  }
  .customer-top__actions {
    justify-content: stretch;
  }
  .desk-primary {
    flex: 1;
  }
  .customer-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-focus__body {
    grid-template-columns: 74px minmax(0, 1fr);
  }
  .order-focus__body img {
    width: 74px;
    height: 74px;
  }
  .order-focus__body strong {
    grid-column: 2;
  }
  .desk-stepper {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .desk-stepper span {
    grid-template-columns: 20px minmax(0, 1fr);
    justify-items: start;
  }
  .desk-stepper span::before {
    display: none;
  }
}
@media (max-width: 460px) {
  .customer-kpis {
    grid-template-columns: 1fr;
  }
  .customer-card--profile {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .customer-card--profile small { grid-column: auto; }
  .reorder-list a {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }
  .reorder-list > a > svg {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
  }
}

/* Customer desk - Tanura-inspired visual pass */
.customer-desk {
  --tnr-brand: #d97f1e;
  --tnr-brand-2: #e89a3c;
  --tnr-accent: #e0492b;
  --tnr-cream: #fdf6ec;
  --tnr-border: color-mix(in srgb, var(--accent) 26%, transparent);
  --tnr-card: color-mix(in srgb, var(--surface-solid) 78%, var(--bg-soft));
  --tnr-shadow: 0 14px 36px rgba(74, 49, 24, .16);
  background:
    radial-gradient(900px 420px at 76% -8%, rgba(217, 127, 30, .14), transparent 62%),
    radial-gradient(760px 360px at 9% 18%, rgba(224, 73, 43, .07), transparent 58%);
}
html[data-theme="light"] .customer-desk {
  --tnr-card: #fffaf3;
  color: #2b2118;
}
.customer-top {
  padding-top: 28px;
}
.customer-top h1 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0;
}
.desk-primary {
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--tnr-brand-2), var(--tnr-brand) 58%, #bd6413);
  box-shadow: 0 12px 28px rgba(217, 127, 30, .24);
}
.desk-icon-btn {
  border-radius: 50%;
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--tnr-shadow);
}
.customer-layout {
  grid-template-columns: 250px minmax(0, 1fr);
}
.customer-card,
.customer-nav,
.customer-support,
.desk-panel,
.customer-kpis article {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--tnr-shadow);
}
.customer-card--profile,
.customer-nav,
.customer-support,
.desk-panel,
.customer-kpis article {
  border-radius: 18px;
}
.customer-card--profile {
  padding: 18px;
}
.customer-avatar img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}
.customer-level {
  color: var(--tnr-brand-2);
  background: color-mix(in srgb, var(--tnr-brand) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tnr-brand) 22%, transparent);
}
.customer-nav {
  padding: 11px;
}
.customer-nav a {
  min-height: 46px;
  border-radius: 13px;
  font-weight: 800;
}
.customer-nav a:hover,
.customer-nav a.is-active {
  color: var(--text-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tnr-brand) 20%, transparent), color-mix(in srgb, var(--tnr-brand) 8%, transparent));
  box-shadow: inset 3px 0 0 var(--tnr-brand);
}
.customer-nav em {
  background: linear-gradient(135deg, var(--tnr-brand-2), var(--tnr-brand));
}
.customer-support {
  background:
    linear-gradient(140deg, #8a5a34 0%, #5b3c25 46%, #2c1c11 100%);
  color: #fff4ee;
  border-color: rgba(255,255,255,.08);
}
.customer-support b { color: #fff4ee; }
.customer-support span { color: rgba(255,248,238,.72); }
.customer-support > svg { color: var(--tnr-brand-2); }
.customer-support button {
  color: #fff4ee;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}
.customer-board {
  gap: 16px;
}
.customer-kpis {
  gap: 14px;
}
.customer-kpis article {
  min-height: 118px;
  padding: 17px;
}
.customer-kpis article > span {
  border-radius: 14px;
  background: color-mix(in srgb, var(--tnr-brand) 13%, transparent);
  color: var(--tnr-brand-2);
}
.customer-kpis strong {
  font-size: 24px;
}
.customer-kpis i.up {
  color: #2f9e6f;
}
.desk-panel__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.desk-label {
  color: var(--tnr-brand-2);
  font-size: 11.5px;
}
.desk-status,
.status-pill--warn {
  color: var(--tnr-brand-2);
  background: color-mix(in srgb, var(--tnr-brand) 13%, transparent);
  border-color: color-mix(in srgb, var(--tnr-brand) 28%, transparent);
}
.order-focus__body,
.reorder-list a,
.roaster-feed a,
.address-desk__map {
  background: color-mix(in srgb, var(--surface) 84%, var(--bg-soft));
  border-color: var(--line);
  border-radius: 16px;
}
.order-focus__body {
  margin-top: 2px;
}
.order-focus__body img,
.reorder-list img,
.roaster-feed img {
  border-radius: 14px;
}
.order-focus__meta small,
.delivery-note {
  background: color-mix(in srgb, var(--tnr-brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--tnr-brand) 18%, transparent);
}
.desk-stepper {
  margin-top: 20px;
}
.desk-stepper i {
  background: var(--surface);
}
.desk-stepper .done i,
.desk-stepper .active i {
  background: linear-gradient(135deg, var(--tnr-brand-2), var(--tnr-brand));
}
.desk-stepper .active i {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--tnr-brand) 15%, transparent);
}
.order-focus__actions a,
.order-focus__actions button,
.desk-mini-btn {
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.order-focus__actions a:first-child {
  color: var(--tnr-brand-2);
  background: color-mix(in srgb, var(--tnr-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--tnr-brand) 24%, transparent);
}
.desk-panel--tight {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(135deg, #e6953a 0%, #c85a2a 60%, #8a3d20 100%);
  color: #fff4ee;
  border-color: transparent;
}
.desk-panel--tight .desk-label,
.desk-panel--tight h2,
.desk-panel--tight .desk-panel__icon,
.desk-panel--tight .reward-lines b,
.desk-panel--tight .reward-lines span {
  color: #fff4ee;
}
.desk-panel--tight .desk-panel__head,
.desk-panel--tight .reward-lines div {
  border-color: rgba(255,255,255,.2);
}
.reward-ring {
  background:
    radial-gradient(circle, #7a3d15 0 56%, transparent 57%),
    conic-gradient(#fff2c8 calc(var(--p) * 1%), rgba(255,255,255,.24) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.reward-ring strong,
.reward-ring span {
  color: #fff4ee;
}
.reorder-list > a > svg {
  background: linear-gradient(135deg, var(--tnr-brand-2), var(--tnr-brand));
}
.address-desk__map span,
.roaster-feed i {
  background: linear-gradient(135deg, var(--tnr-brand-2), var(--tnr-brand));
}
.delivery-note {
  color: var(--tnr-brand-2);
}
html[data-theme="light"] .customer-card,
html[data-theme="light"] .customer-nav,
html[data-theme="light"] .desk-panel,
html[data-theme="light"] .customer-kpis article {
  background: #fff;
  border-color: #ece2d4;
}
html[data-theme="light"] .customer-desk {
  background:
    radial-gradient(1200px 560px at 78% -18%, rgba(242,169,59,.18), transparent 62%),
    linear-gradient(180deg, rgba(253,246,236,.75), rgba(253,246,236,.16) 42%, transparent);
}

@media (max-width: 1040px) {
  .customer-layout,
  .customer-main-grid,
  .customer-secondary-grid {
    grid-template-columns: 1fr;
  }
  .customer-rail {
    position: static;
  }
}

/* Account corrections: keep the marketplace coffee theme, not Tanura orange */
.customer-desk {
  --tnr-brand: var(--accent);
  --tnr-brand-2: var(--accent-strong);
  --tnr-accent: var(--gold);
  --tnr-border: var(--line-strong);
  --tnr-shadow: var(--shadow-card);
  background: transparent;
}
html[data-theme="light"] .customer-desk {
  color: var(--text);
  background: transparent;
}
.desk-primary,
.customer-nav em,
.desk-stepper .done i,
.desk-stepper .active i,
.reorder-list > a > svg,
.address-desk__map span,
.roaster-feed i {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.desk-primary {
  color: #1a120b;
  box-shadow: var(--shadow-card);
}
.customer-nav a:hover,
.customer-nav a.is-active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.customer-level,
.desk-status,
.status-pill--warn,
.delivery-note {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.customer-kpis article > span,
.order-focus__meta small {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}
.customer-support {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent-deep) 74%, #1b120c), var(--surface-solid));
}
.account-summary-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.summary-ic {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}
.summary-ic svg { width: 24px; height: 24px; }
.account-summary-card span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}
.account-summary-card h2 {
  margin: 2px 0 4px;
  color: var(--text-strong);
  font-size: 18px;
}
.account-summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.account-summary-card > a,
.roaster-feed .text-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.account-summary-card > a svg,
.roaster-feed .text-link svg {
  width: 15px;
  height: 15px;
}
.desk-panel--tight {
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-solid));
  color: var(--text);
  border-color: var(--line);
}
.desk-panel--tight .desk-label,
.desk-panel--tight h2,
.desk-panel--tight .desk-panel__icon,
.desk-panel--tight .reward-lines b,
.desk-panel--tight .reward-lines span {
  color: inherit;
}
.desk-panel--tight .desk-label,
.desk-panel--tight .desk-panel__icon {
  color: var(--accent-strong);
}
.desk-panel--tight .desk-panel__head,
.desk-panel--tight .reward-lines div {
  border-color: var(--line);
}
.reward-ring {
  background:
    radial-gradient(circle, var(--surface-solid) 0 56%, transparent 57%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line-strong) 0);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reward-ring strong {
  color: var(--text-strong);
}
.reward-ring span {
  color: var(--muted);
}
html[data-theme="light"] .desk-panel--tight {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    var(--surface-raised);
  color: var(--text);
  border-color: var(--line-strong);
}
html[data-theme="light"] .desk-panel--tight .reward-lines b,
html[data-theme="light"] .desk-panel--tight h2 {
  color: var(--text-strong);
}
html[data-theme="light"] .desk-panel--tight .reward-lines span,
html[data-theme="light"] .reward-ring span {
  color: var(--muted);
}
html[data-theme="light"] .reward-ring {
  background:
    radial-gradient(circle, var(--surface-raised) 0 56%, transparent 57%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0);
}
@media (max-width: 760px) {
  .account-summary-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .account-summary-card > a {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Restore the richer Tanura-like treatment for support and loyalty cards */
.customer-support {
  background:
    radial-gradient(circle at 12% 0, rgba(240, 154, 95, .24), transparent 42%),
    linear-gradient(140deg, #8a5a34 0%, #5b3c25 46%, #2c1c11 100%);
  color: #fff4ee;
  border-color: rgba(255, 255, 255, .1);
}
.customer-support b { color: #fff4ee; }
.customer-support span { color: rgba(255, 248, 238, .74); }
.customer-support > svg { color: #ffb08f; }
.customer-support button {
  color: #fff4ee;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .2);
}
.desk-panel--tight {
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, .18), transparent 38%),
    linear-gradient(135deg, #db7a4e 0%, #db7a4e 58%, #8f3c22 100%);
  color: #fff4ee;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 18px 44px rgba(143, 60, 34, .26);
}
.desk-panel--tight .desk-label,
.desk-panel--tight h2,
.desk-panel--tight .desk-panel__icon,
.desk-panel--tight .reward-lines b,
.desk-panel--tight .reward-lines span {
  color: #fff4ee;
}
.desk-panel--tight .desk-label,
.desk-panel--tight .desk-panel__icon {
  color: #ffd2bf;
}
.desk-panel--tight .desk-panel__head,
.desk-panel--tight .reward-lines div {
  border-color: rgba(255, 255, 255, .22);
}
.desk-panel--tight .reward-ring {
  background:
    radial-gradient(circle, rgba(143, 60, 34, .96) 0 56%, transparent 57%),
    conic-gradient(#ffd2bf calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.desk-panel--tight .reward-ring strong,
.desk-panel--tight .reward-ring span {
  color: #fff4ee;
}

/* Loyalty card final palette: readable in light, premium in dark */
html[data-theme="light"] .desk-panel--tight {
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, .62), transparent 38%),
    linear-gradient(145deg, #fff4ee 0%, #ffd0be 48%, #db7a4e 100%);
  color: #2a1d14;
  border-color: rgba(193, 90, 56, .26);
  box-shadow: 0 18px 42px rgba(193, 90, 56, .18);
}
html[data-theme="light"] .desk-panel--tight .desk-label,
html[data-theme="light"] .desk-panel--tight .desk-panel__icon {
  color: #c15a38;
}
html[data-theme="light"] .desk-panel--tight h2,
html[data-theme="light"] .desk-panel--tight .reward-lines b,
html[data-theme="light"] .desk-panel--tight .reward-ring strong {
  color: #2a1d14;
}
html[data-theme="light"] .desk-panel--tight .reward-lines span,
html[data-theme="light"] .desk-panel--tight .reward-ring span {
  color: #735f4e;
}
html[data-theme="light"] .desk-panel--tight .desk-panel__head,
html[data-theme="light"] .desk-panel--tight .reward-lines div {
  border-color: rgba(193, 90, 56, .22);
}
html[data-theme="light"] .desk-panel--tight .reward-ring {
  background:
    radial-gradient(circle, #fff4ee 0 56%, transparent 57%),
    conic-gradient(#c15a38 calc(var(--p) * 1%), rgba(193, 90, 56, .18) 0);
  box-shadow: inset 0 0 0 1px rgba(193, 90, 56, .18);
}
html[data-theme="dark"] .desk-panel--tight {
  background:
    radial-gradient(circle at 14% 0, rgba(255, 176, 143, .22), transparent 40%),
    linear-gradient(145deg, #2a1a10 0%, #8f3c22 54%, #c15a38 100%);
  color: #fff4ee;
  border-color: rgba(255, 176, 143, .18);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .desk-panel--tight .desk-label,
html[data-theme="dark"] .desk-panel--tight .desk-panel__icon {
  color: #ffb08f;
}
html[data-theme="dark"] .desk-panel--tight .reward-ring {
  background:
    radial-gradient(circle, #2a1a10 0 56%, transparent 57%),
    conic-gradient(#ffb08f calc(var(--p) * 1%), rgba(255, 176, 143, .22) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 143, .16);
}

/* =========================================================================
   Account UI/UX concepts preview
   ========================================================================= */
.account-concepts-page main { padding-bottom: 64px; }
.concepts-head {
  padding: 34px 0 12px;
}
.concepts-head h1 {
  max-width: 760px;
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: clamp(26px, 4vw, 42px);
}
.concepts-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-top: 16px;
}
.concept-card {
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.concept-card__meta {
  display: grid;
  gap: 5px;
}
.concept-card__meta span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.concept-card__meta b {
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 950;
}
.concept-card__meta small {
  color: var(--muted);
  line-height: 1.7;
}
.concept-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.concept-card li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.8;
}
.concept-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .8em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.concept-ops__preview,
.concept-order__preview,
.concept-club__preview,
.concept-mobile__preview {
  min-height: 260px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface-solid);
  overflow: hidden;
}
.concept-ops__preview {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
}
.concept-ops__preview aside {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
  border-inline-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 30%, transparent);
}
.mini-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: url("../assets/images/account-roastery.jpg") center / cover;
  border: 1px solid var(--line-strong);
  margin-bottom: 8px;
}
.concept-ops__preview aside a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.concept-ops__preview aside a.on {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.concept-ops__preview aside svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.concept-ops__preview > div {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}
.mini-command {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr 42px 42px;
  gap: 8px;
}
.mini-command span,
.mini-command i,
.mini-kpis b,
.mini-order {
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: 13px;
}
.mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mini-kpis b {
  min-height: 74px;
  display: grid;
  place-items: center;
  color: var(--text-strong);
  font-size: 20px;
}
.mini-order {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
}
.mini-order img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
}
.mini-order b,
.mini-order small {
  display: block;
}
.mini-order b { color: var(--text-strong); }
.mini-order small { color: var(--accent); margin-top: 5px; }
.concept-order__preview {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent),
    var(--surface-solid);
}
.route-map {
  height: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.route-map span {
  position: relative;
  display: grid;
  place-items: center;
}
.route-map span::before {
  content: "";
  width: 100%;
  height: 3px;
  background: var(--line-strong);
  position: absolute;
}
.route-map span::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  background: var(--surface-solid);
}
.route-map .done::after,
.route-map .now::after {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #7fbd87);
}
.route-map .now::after {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent);
}
.delivery-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.delivery-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
}
.delivery-card b,
.delivery-card small {
  display: block;
}
.delivery-card b { color: var(--text-strong); }
.delivery-card small { color: var(--muted); margin-top: 6px; }
.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.action-row i {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--glass);
}
.concept-club__preview {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 35%),
    var(--surface-solid);
}
.club-ring {
  width: 140px;
  height: 140px;
  align-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface-solid) 0 56%, transparent 57%),
    conic-gradient(var(--gold) 82%, var(--line-strong) 0);
}
.club-ring b {
  color: var(--text-strong);
  font-size: 25px;
}
.club-products {
  display: grid;
  gap: 10px;
  align-content: center;
}
.club-products a {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.club-products img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 13px;
}
.club-products span {
  height: 12px;
  border-radius: 99px;
  background: var(--line-strong);
}
.coupon-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
}
.coupon-strip svg { width: 20px; height: 20px; }
.coupon-strip b { font-size: 13px; }
.concept-mobile__preview {
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
    var(--surface-solid);
}
.phone-shell {
  width: 170px;
  height: 242px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: var(--bg);
  box-shadow: inset 0 0 0 5px var(--surface-solid);
}
.phone-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.phone-head span,
.phone-head b,
.phone-card,
.phone-grid i,
.phone-list span {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.phone-head span { width: 34px; height: 34px; }
.phone-head b { flex: 1; height: 34px; }
.phone-card.big {
  height: 70px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.phone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.phone-grid i { height: 42px; }
.phone-list {
  display: grid;
  gap: 7px;
}
.phone-list span { height: 24px; }

@media (max-width: 900px) {
  .concept-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .concept-card { padding: 16px; min-height: auto; }
  .concept-ops__preview,
  .concept-club__preview {
    grid-template-columns: 1fr;
  }
  .concept-ops__preview aside {
    grid-auto-flow: column;
    overflow-x: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .club-ring { margin-inline: auto; }
}
/* Account panel - compact breadcrumb header and ajax loading */
.customer-head-panel {
  position: relative;
  display: block;
  margin-top: 18px;
  margin-bottom: 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.customer-head-panel::before {
  content: none;
}
.customer-head-copy {
  max-width: 680px;
}
[data-ajax-panel] {
  position: relative;
}
[data-ajax-panel].is-ajax-loading {
  overflow: hidden;
  pointer-events: none;
}
[data-ajax-panel].is-ajax-loading > * {
  opacity: .22;
  filter: blur(.7px);
}
[data-ajax-panel].is-ajax-loading::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 3;
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
    linear-gradient(color-mix(in srgb, var(--surface-solid) 92%, transparent), color-mix(in srgb, var(--surface-solid) 92%, transparent));
  background-size: 220% 100%, 100% 100%;
  animation: deskShimmer 1.05s linear infinite;
}
[data-ajax-panel].is-ajax-loading::before {
  content: "در حال بارگذاری...";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  min-width: 150px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-solid);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
.is-ajax-ready {
  animation: fadeUp .34s var(--ease) both;
}
@keyframes deskShimmer {
  from { background-position: 120% 0, 0 0; }
  to { background-position: -120% 0, 0 0; }
}
.desk-panel__head {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.desk-panel__icon {

}
.summary-ic,
.customer-kpis article > span {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px color-mix(in srgb, var(--accent-deep) 18%, transparent);
}
.customer-kpis article,
.desk-panel,
.account-summary-card,
.customer-card,
.customer-nav,
.customer-support {
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.customer-kpis article:hover,
.desk-panel:hover,
.account-summary-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}
html[data-theme="light"] .customer-head-panel {
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] [data-ajax-panel].is-ajax-loading::after {
  background:
    linear-gradient(90deg, transparent, rgba(193, 90, 56, .12), transparent),
    linear-gradient(rgba(255, 250, 244, .94), rgba(255, 250, 244, .94));
  background-size: 220% 100%, 100% 100%;
}
@media (max-width: 1040px) {
  .customer-head-panel {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .customer-head-panel {
    padding: 0;
    border-radius: 0;
  }
  [data-ajax-panel].is-ajax-loading::before {
    min-width: 128px;
  }
}

/* ========================================================================== 
   پنل مشتری — کامپوننت‌های تب‌ها (سفارش‌ها/آدرس‌ها/کیف‌پول/علاقه‌مندی/دنبال‌شده)
   ========================================================================== */
.vendor-initial-loading {
  display: none;
  grid-column: 1 / -1;
  min-height: 420px;
  align-content: center;
}
.customer-layout.is-initial-loading > .vendor-initial-loading {
  display: grid;
}
.customer-layout.is-initial-loading > [data-rail],
.customer-layout.is-initial-loading > [data-content] {
  display: none;
}

.customer-layout.is-guest { grid-template-columns: minmax(0, 1fr); }
.customer-layout.is-guest [data-rail] { display: none; }
.customer-layout.is-guest [data-content] { max-width: 520px; margin-inline: auto; }

.customer-nav a.logout {
  margin-top: 4px;
  color: var(--danger);
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-top: 14px;
}
.customer-nav a.logout:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.customer-nav a.logout svg { color: var(--danger); }

.icon-btn--sm { width: 30px; height: 30px; }
.icon-btn--sm svg { width: 15px; height: 15px; }

.status-pill--info {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent-strong);
}
.status-pill--danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  color: var(--danger);
}

.list-rows { display: grid; gap: 10px; }
.list-empty { padding: 14px 2px; color: var(--muted); font-size: 13px; }
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  flex-wrap: wrap;
}
.list-row__ic {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
}
.list-row__ic svg { width: 18px; height: 18px; }
.list-row__img {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface-2);
}
.list-row__ic.is-in { background: color-mix(in srgb, #7bbf76 16%, transparent); color: #7bbf76; }
.list-row__ic.is-out { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.list-row__body { flex: 1 1 180px; min-width: 0; display: grid; gap: 3px; }
.list-row__body b { color: var(--text-strong); font-size: 13px; }
.list-row__body small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.list-row__amount { color: var(--text-strong); font-size: 13px; white-space: nowrap; }
.list-row__amount.is-in { color: #7bbf76; }
.list-row__amount.is-out { color: var(--danger); }
.list-row__amount .is-unavailable { color: var(--muted); font-weight: 700; }
.list-row__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }

.form-grid .mini-action {
  margin-top:16px;
}
.mini-action {

  width: max-content;
  max-height: 37px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .16s var(--ease);
}
.mini-action:hover { border-color: var(--accent); color: var(--accent-strong); }
.list-row__actions .mini-action { text-decoration: none; }
.favorites-count { color: var(--muted); font-size: 12px; font-weight: 800; }
.favorite-remove { color: var(--danger); }
.favorite-row .list-row__body b { font-size: 14px; }
.mini-action--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.mini-action--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.pager-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.pager-btn svg { width: 15px; height: 15px; }
.pager-btn.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; border-color: transparent; }
.pager-btn:disabled { opacity: .4; cursor: default; }

.wallet-hero .wallet-hint { margin: 0; color: var(--muted); font-size: 12px; }
.charge-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.wallet-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  grid-template-areas: "history side";
  gap: 14px;
  direction: ltr;
  align-items: start;
}
.wallet-side,
.wallet-history-card {
  direction: rtl;
}
.wallet-side {
  grid-area: side;
  display: grid;
  gap: 14px;
}
.wallet-history-card { grid-area: history; }
.wallet-balance-card { min-height: 190px; }
.wallet-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wallet-balance-amount {
  display: block;
  margin-top: 20px;
  color: inherit;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 950;
}
.wallet-label {
  display: block;
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.wallet-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wallet-history-list {
  margin-top: 12px;
}
.wallet-txn .list-row__amount {
  margin-inline-start: auto;
}

@media (max-width: 980px) {
  .wallet-board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "history";
    direction: rtl;
  }
}

@media (max-width: 640px) {
  .wallet-quick-grid {
    grid-template-columns: 1fr;
  }
}

.following-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.following-grid .roaster-card { position: relative; }
.mini-unfollow {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 13px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.32);
  color: #fff;
}
.mini-unfollow svg { width: 14px; height: 14px; }

.product-card__fav.is-active { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.product-card__fav.is-active svg { fill: currentColor; }

.order-detail-items { display: grid; gap: 10px; margin-bottom: 16px; }
.order-detail-item { display: flex; align-items: center; gap: 10px; }
.order-detail-item img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.order-detail-item div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.order-detail-item b { font-size: 13px; color: var(--text-strong); }
.order-detail-item small { font-size: 11px; color: var(--muted); }
.order-detail-item strong { font-size: 12px; color: var(--text-strong); white-space: nowrap; }
.order-detail-rows { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.order-detail-rows > div { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.order-detail-rows > div b { color: var(--text); font-weight: 700; font-size: 12px; }
.order-detail-rows > div.total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.order-detail-rows > div.total b { color: var(--accent-strong); font-size: 15px; font-weight: 900; }

@media (max-width: 640px) {
  .list-row { flex-direction: column; align-items: stretch; }
  .favorite-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
  .favorite-row .list-row__img { grid-row: 1 / span 2; }
  .favorite-row .list-row__amount { grid-column: 2; }
  .favorite-row .list-row__actions { grid-column: 1 / -1; }
  .list-row__actions { margin-inline-start: 0; justify-content: flex-end; flex-wrap: wrap;}
}

/* ==========================================================================
   پنل فروشنده — نمودار، موجودی، نظرات و گزارش‌ها
   ========================================================================== */
.v-chart { margin-top: 6px; }
.v-chart svg { width: 100%; height: 158px; display: block; }
.v-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; }
.v-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v-chart .dot { fill: var(--accent-strong); stroke: var(--surface-solid); stroke-width: 2.5; }
.v-chart .avg { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 5 6; opacity: .75; }
.v-chart__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-inline: 2px;
  color: var(--muted-2);
  font-size: 11px;
}

.list-row__img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.list-row.is-paused > *:not(.list-row__actions) { opacity: .45; }

.stock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #7bbf76 14%, transparent);
  border: 1px solid color-mix(in srgb, #7bbf76 30%, transparent);
  color: color-mix(in srgb, #9fe096 82%, var(--text));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.stock-badge--low {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold);
}
.stock-badge--out {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}
.stock-ctrl { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.stock-ctrl button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: .16s var(--ease);
}
.stock-ctrl button:hover { color: var(--accent-strong); border-color: var(--accent); }
.stock-ctrl svg { width: 13px; height: 13px; }

.vendor-stock-card {
  position: relative;
  overflow: hidden;
  gap: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), var(--surface-solid)) !important;
}
.vendor-stock-card::before {
  content: "";
  position: absolute;
  inset-inline: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent-deep));
  opacity: .9;
}
.vendor-stock-list {
  position: relative;
  display: grid;
  gap: 9px;
}
.vendor-stock-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
}

.vendor-stock-item.isblock img{
  margin-left: 7px;
  margin-bottom: 11px;
}
.vendor-stock-item.isblock{
  display:block;
}
.d-flex{
  display:flex !important;
}

.vendor-stock-item img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.vendor-stock-item b,
.vendor-stock-item small {
  display: block;
}
.vendor-stock-item b {
  color: var(--text-strong);
  font-size: 12.5px;
  line-height: 1.55;
}
.vendor-stock-item small {
  color: var(--muted);
  font-size: 11px;
}
.vendor-stock-item--pending {
  grid-template-columns: 38px minmax(0, 1fr);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface-solid));
}
.vendor-stock-cta {
  position: relative;
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.36), transparent 32%),
    linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #211409;
  box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--accent-deep) 70%, transparent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.vendor-stock-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 26px -17px color-mix(in srgb, var(--accent-deep) 85%, transparent);
}
.vendor-stock-cta svg {
  width: 16px;
  height: 16px;
}
.vendor-product-row {
  display: grid;
  grid-template-columns: 58px minmax(190px, 1fr) auto minmax(112px, auto) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 72%, transparent), var(--surface-solid));
}
.vendor-product-row .list-row__img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}
.vendor-product-row .list-row__body {
  gap: 5px;
}
.vendor-product-row .list-row__body b {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.vendor-product-row .list-row__body small {
  white-space: normal;
  line-height: 1.6;
}
.vendor-product-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-2);
  font-size: 11px;
}
.vendor-product-meta svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.vendor-product-state {
  display: grid;
  justify-items: start;
  gap: 7px;
}
.vendor-product-price {
  display: grid;
  gap: 3px;
  min-width: 112px;
}
.vendor-product-price span {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
}
.vendor-product-price .list-row__amount {
  font-size: 13.5px;
}
.compare-at-price {
  display: block;
  margin-top: 3px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration-thickness: 1px;
}
.compare-at-price[hidden] { display: none; }
.compare-at-price--inline { display: inline; margin: 0 4px; }
.coffee-price-box .compare-at-price { font-size: 12px; }
.ap2-price .compare-at-price { font-size: 13px; }
.ap2-offer__meta .compare-at-price { font-size: 10px; }
.vendor-product-actions {
  gap: 6px;
}
.vendor-product-actions .mini-action {
  min-height: 30px;
  padding-inline: 11px;
}
.vendor-product-actions .icon-btn--sm {
  width: 30px;
  height: 30px;
  background: var(--glass);
  border-color: var(--line);
}

@media (max-width: 980px) {
  .vendor-product-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }
  .vendor-product-state,
  .vendor-product-price,
  .vendor-product-actions {
    grid-column: 2 / -1;
  }
  .vendor-product-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .vendor-product-actions {
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

.bar-rows { display: grid; gap: 14px; padding-block: 6px; }
.bar-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.bar-row span { color: var(--muted); font-size: 12px; }
.bar-row b { color: var(--text-strong); font-size: 12px; white-space: nowrap; }
.bar-row__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  overflow: hidden;
}
.bar-row__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

.rank-badge {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.stars { display: inline-flex; gap: 3px; color: var(--muted-2); }
.stars svg { width: 16px; height: 16px; }
.stars svg.on { color: var(--gold); fill: currentColor; stroke-width: 0; }

.review-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  display: grid;
  gap: 9px;
  justify-items: start;
}
.review-card__head { display: flex; align-items: center; gap: 10px; width: 100%; }
.review-card p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.9; }
.review-reply {
  display: flex;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
      margin-top: 14px;
}
.review-reply svg { flex: none; width: 15px; height: 15px; color: var(--accent-strong); margin-top: 3px; }

.sheba-num { font-size: 13px !important; letter-spacing: .4px; }
.desk-mini-btn[disabled] { opacity: .45; cursor: default; }
.modal-select {
  width: 100%;
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.upload-grid .gallery-img { width: 100%; height: 100%; min-height: 120px; object-fit: cover; border-radius: var(--radius-md); }
.upload-grid > div:has(.gallery-img) { padding: 0; overflow: hidden; border-style: solid; }

@media (max-width: 640px) {
  .bar-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .stock-ctrl { justify-content: flex-start; }
}

/* ---- فرم کامل محصول: آپلود چندتصویری، ارز، ویدیو، راهنما ---- */
.modal--wide { max-width: 620px; }
.modal--wide .modal-body { max-height: min(78vh, 720px); overflow-y: auto; }

.img-uploader { display: flex; flex-wrap: wrap; gap: 10px; }
.img-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb span {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.img-thumb button {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.img-add {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: .16s var(--ease);
}
.img-add:hover { border-color: var(--accent); color: var(--accent-strong); }
.img-add svg { width: 18px; height: 18px; }
.img-add small { font-size: 11px; }

.price-preview {
  margin: -4px 0 12px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--muted);
  font-size: 12px;
}
.price-preview b { color: var(--accent-strong); }

.video-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
}
.video-chip svg { width: 11px; height: 11px; }

.panel-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}
.panel-hint > svg { flex: none; width: 16px; height: 16px; color: var(--accent-strong); margin-top: 4px; }
.panel-hint .inline-ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--accent-strong); }

/* ---- KYC و گالری پروفایل فروشنده ---- */
.kyc-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.kyc-info { display: flex; align-items: center; gap: 11px; flex: 1 1 240px; }
.kyc-info > svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
}
.kyc-info b { display: block; color: var(--text-strong); font-size: 13px; }
.kyc-info small { color: var(--muted); font-size: 11px; }
.kyc-img { width: 66px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line-strong); }

.gal-item { position: relative; padding: 0 !important; overflow: hidden; border-style: solid !important; }
.gal-rm {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.gal-item:hover .gal-rm { opacity: 1; }
.gal-add { cursor: pointer; transition: border-color .16s var(--ease); }
.gal-add:hover { border-color: var(--accent); }
.vendor-cover-editor { display: grid; gap: 12px; margin-bottom: 18px; }
.vendor-cover-editor__preview,
.vendor-cover-editor__empty { width: 100%; aspect-ratio: 21 / 7; min-height: 140px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.vendor-cover-editor__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vendor-cover-editor__empty { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); }
.vendor-cover-editor__empty svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.vendor-cover-editor__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vendor-cover-editor__actions small { color: var(--muted); }
.mini-action--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.desk-panel{
  width: 100%;
  overflow: auto;
}
.upload-grid--horizontal {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.upload-grid--horizontal > div {
  flex: 0 0 clamp(150px, 24vw, 220px);
}
.support-filters,
.support-pagination { margin-top: 14px; }
.category-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.category-pagination[hidden] { display: none; }
.category-pagination > a, .category-pagination > span:not(.category-pagination__pages), .category-pagination__pages > a, .category-pagination__pages > span:not(.category-pagination__ellipsis) { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 12px; text-decoration: none; }
.category-pagination a:hover { border-color: var(--accent); color: var(--accent-strong); }
.category-pagination .is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.category-pagination .is-disabled { opacity: .45; }
.category-pagination__pages { display: inline-flex; align-items: center; gap: 7px; }
.category-pagination__ellipsis { min-width: 20px; text-align: center; color: var(--muted); }
.support-ticket-row {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ticket-conversation {
  display: grid;
  gap: 10px;
  max-height: 48vh;
  overflow-y: auto;
  margin: 14px 0;
  padding: 4px;
}
.ticket-message {
  width: min(88%, 520px);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
}
.ticket-message--vendor { justify-self: start; }
.ticket-message--admin {
  justify-self: end;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-solid));
}
.ticket-message header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}
.ticket-message p {
  margin: 7px 0 0;
  line-height: 1.9;
}

/* ---- گزارش فروش پیشرفته: آمار نمودار، دونات، جریان درآمد ---- */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.roasters.chip-row {    overflow-x: auto;padding-bottom: 8px;flex-wrap: nowrap; }

.chart-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.chart-stats > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.chart-stats small { color: var(--muted); font-size: 11px; }
.chart-stats b { color: var(--text-strong); font-size: 15px; font-weight: 900; }

.donut-box { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-block: 8px; }
.donut-wrap { position: relative; width: 168px; height: 168px; flex: none; margin-inline: auto; }
.donut-wrap svg { width: 100%; height: 100%; }
.donut-seg { fill: none; stroke-width: 17; transition: stroke-width .18s var(--ease); }
.donut-seg:hover { stroke-width: 21; }
.seg-0 { stroke: var(--accent); }
.seg-1 { stroke: var(--gold); }
.seg-2 { stroke: var(--accent-deep); }
.seg-3 { stroke: #7bbf76; }
.seg-4 { stroke: var(--muted-2); }
.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
}
.donut-center b { color: var(--text-strong); font-size: 19px; font-weight: 900; }
.donut-center small { color: var(--muted); font-size: 11px; }
.donut-legend { flex: 1 1 220px; display: grid; gap: 10px; }
.donut-leg {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}
.donut-leg i { width: 11px; height: 11px; border-radius: 4px; }
.donut-leg i.seg-0 { background: var(--accent); }
.donut-leg i.seg-1 { background: var(--gold); }
.donut-leg i.seg-2 { background: var(--accent-deep); }
.donut-leg i.seg-3 { background: #7bbf76; }
.donut-leg i.seg-4 { background: var(--muted-2); }
.donut-leg span { color: var(--text); font-size: 12px; font-weight: 700; }
.donut-leg small { color: var(--muted); font-size: 11px; }
.donut-leg b { color: var(--text-strong); font-size: 12px; }

.flow-bar {
  display: flex;
  height: 30px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--line);
}
.flow-bar i { display: block; height: 100%; }
.flow-bar .flow-net { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.flow-bar .flow-comm { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.flow-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.flow-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  font-size: 12px;
}
.flow-legend span { color: var(--muted); flex: 1; }
.flow-legend b { color: var(--text-strong); white-space: nowrap; }
.flow-dot { flex: none; width: 11px; height: 11px; border-radius: 4px; }
.flow-dot--net { background: var(--accent); }
.flow-dot--comm { background: var(--gold); }
.flow-dot--gross { background: var(--muted-2); }

/* ---- نظرات: بند خلاصه + گرید کارت‌ها ---- */
.review-summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding-block: 6px;
}
.rs-score {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
}
.rs-score > b { color: var(--text-strong); font-size: 38px; font-weight: 950; line-height: 1; }
.rs-score .stars svg { width: 18px; height: 18px; }
.rs-score small { color: var(--muted); font-size: 11px; }
.rs-bars { display: grid; gap: 9px; }
.rs-bars .bar-row { grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 9px; }
.rs-stats { display: grid; gap: 10px; }
.rs-stats > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}
.rs-stats b { color: var(--accent-strong); font-size: 17px; font-weight: 900; }
.rs-stats small { color: var(--muted); font-size: 11px; }

.review-filters { margin-bottom: 16px; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.review-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 900;
}
.rc-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rc-id b { color: var(--text-strong); font-size: 13px; }
.rc-id small { color: var(--muted-2); font-size: 11px; }
.review-card__head .stars { margin-inline-start: auto; }
.review-card__head .stars svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .review-summary { grid-template-columns: 1fr; }
  .rs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-stats > div { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
}
@media (max-width: 640px) {
  .chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-legend { grid-template-columns: 1fr; }
  .rs-stats { grid-template-columns: 1fr; }
  .donut-box { justify-content: center; }
}

/* Cart invoice: keep order invoice visible while scrolling on desktop */
@media (min-width: 861px) {
  .cart-checkout {
    align-items: start;
  }
  .cart-summary.invoice {
    position: relative;
    top: auto;
    align-self: start;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(var(--invoice-stick-y, 0));
    will-change: transform;
  }
}
@media (max-width: 860px) {
  .cart-summary.invoice {
    position: static;
    max-height: none;
    overflow: visible;
    transform: none;
  }
}

/* Light internal pages: shared canvas/card language aligned with homepage */
html[data-theme="light"] body.app-page:not(.home-page) {
  --page-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 249, 241, 1) 100%);
  --page-card-bg-flat: #fff;
  --page-card-border: rgba(143, 60, 34, .12);
  --page-card-border-strong: rgba(143, 60, 34, .20);
  --page-card-shadow: 0 16px 38px rgba(96, 62, 33, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html[data-theme="light"] body.app-page:not(.home-page) .pg-band,
html[data-theme="light"] body.app-page:not(.home-page) .hero-2,
html[data-theme="light"] body.app-page:not(.home-page) .dashboard-hero,
html[data-theme="light"] body.app-page:not(.home-page) .page-hero {
  border-color: transparent;
  background: transparent;
}

html[data-theme="light"] body.app-page:not(.home-page) .pg-card,
html[data-theme="light"] body.app-page:not(.home-page) .cine-card,
html[data-theme="light"] body.app-page:not(.home-page) .value-card,
html[data-theme="light"] body.app-page:not(.home-page) .stat,
html[data-theme="light"] body.app-page:not(.home-page) .deco-quote,
html[data-theme="light"] body.app-page:not(.home-page) .contact-form,
html[data-theme="light"] body.app-page:not(.home-page) .info-card,
html[data-theme="light"] body.app-page:not(.home-page) .map-card,
html[data-theme="light"] body.app-page:not(.home-page) .blog-card,
html[data-theme="light"] body.app-page:not(.home-page) .shop-card,
html[data-theme="light"] body.app-page:not(.home-page) .shop-filters,
html[data-theme="light"] body.app-page:not(.home-page) .dashboard-card,
html[data-theme="light"] body.app-page:not(.home-page) .dashboard-nav,
html[data-theme="light"] body.app-page:not(.home-page) .dashboard-stat-card,
html[data-theme="light"] body.app-page:not(.home-page) .upload-grid > div,
html[data-theme="light"] body.app-page:not(.home-page) .cart-item,
html[data-theme="light"] body.app-page:not(.home-page) .cart-summary,
html[data-theme="light"] body.app-page:not(.home-page) .checkout-card,
html[data-theme="light"] body.app-page:not(.home-page) .checkout-panel,
html[data-theme="light"] body.app-page:not(.home-page) .product-hero,
html[data-theme="light"] body.app-page:not(.home-page) .product-reviews-section,

html[data-theme="light"] body.app-page:not(.home-page) .rv-card,
html[data-theme="light"] body.app-page:not(.home-page) .product-mini-card,
html[data-theme="light"] body.app-page:not(.home-page) .product-seller-card,
html[data-theme="light"] body.app-page:not(.home-page) .product-market-card,
html[data-theme="light"] body.app-page:not(.home-page) .why-match-card,
html[data-theme="light"] body.app-page:not(.home-page) .product-review-card,
html[data-theme="light"] body.app-page:not(.home-page) .customer-card,
html[data-theme="light"] body.app-page:not(.home-page) .customer-nav,
html[data-theme="light"] body.app-page:not(.home-page) .desk-panel:not(.desk-panel--tight),
html[data-theme="light"] body.app-page:not(.home-page) .customer-kpis article,
html[data-theme="light"] body.app-page:not(.home-page) .account-summary-card {
  border-color: var(--page-card-border);
  background: var(--page-card-bg);
  box-shadow: var(--page-card-shadow);
}

html[data-theme="light"] body.app-page:not(.home-page) .product-card,
html[data-theme="light"] body.app-page:not(.home-page) .roaster-card,
html[data-theme="light"] body.app-page:not(.home-page) .metric-grid article,
html[data-theme="light"] body.app-page:not(.home-page) .table-lite,
html[data-theme="light"] body.app-page:not(.home-page) .order-row,
html[data-theme="light"] body.app-page:not(.home-page) .review-card {
  border-color: var(--page-card-border);
  background: linear-gradient(150deg, var(--page-card-bg-flat) 0%, var(--page-card-bg-flat) 64%, #fff7ec 100%);
  box-shadow: 0 10px 24px rgba(96, 62, 33, .055);
}

body[data-page="account"] .shop-grid .product-card__media {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="account"] .shop-grid .product-card__media::after {
  content: none;
}

body[data-page="account"] .shop-grid .product-card__media img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  filter: none;
  box-shadow: none;
}

body[data-page="shop"] .cart-bar {
  position: fixed;
  z-index: 92;
}

html[data-theme="light"] body[data-page="shop"] .chip,
html[data-theme="light"] body[data-page="roasters"] .roaster-filters-bar .chip,
html[data-theme="light"] body[data-page="shop"] .mini-chip,
html[data-theme="light"] body[data-page="shop"] .filter-toggle,
html[data-theme="light"] body[data-page="roasters"] .filter-toggle,
html[data-theme="light"] body[data-page="shop"] .filters-close {
  border-color: rgba(143, 60, 34, .14);
  background:
    linear-gradient(150deg, #fff 0%, #fff 68%, #fff3ee 100%);
  color: #2a1d14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 8px 18px rgba(96, 62, 33, .035);
}

html[data-theme="light"] body[data-page="shop"] .chip:hover,
html[data-theme="light"] body[data-page="roasters"] .roaster-filters-bar .chip:hover,
html[data-theme="light"] body[data-page="shop"] .mini-chip:hover,
html[data-theme="light"] body[data-page="shop"] .filter-toggle:hover,
html[data-theme="light"] body[data-page="roasters"] .filter-toggle:hover,
html[data-theme="light"] body[data-page="shop"] .filters-close:hover {
  border-color: rgba(143, 60, 34, .22);
  background:
    linear-gradient(150deg, #fff 0%, #fff 58%, #fff5e8 100%);
  color: #2a1d14;
}

html[data-theme="light"] body[data-page="shop"] .chip.is-active,
html[data-theme="light"] body[data-page="roasters"] .roaster-filters-bar .chip.is-active,
html[data-theme="light"] body[data-page="shop"] .mini-chip.is-active {
  border-color: rgba(181, 117, 55, .32);
  background:
    linear-gradient(150deg, #fff 0%, #fff 52%, #fff1dc 100%);
  color: #8f3c22;
  box-shadow: inset 0 0 0 1px rgba(181, 117, 55, .08), 0 10px 22px rgba(96, 62, 33, .055);
}

html[data-theme="light"] body[data-page="shop"] .mini-chip.is-active svg {
  color: #b07431;
}

html[data-theme="light"] body[data-page="shop"] .filter-reset {
  width: max-content;
  padding: 8px 13px;
  border: 1px solid rgba(143, 60, 34, .14);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(150deg, #fff 0%, #fff 68%, #fff3ee 100%);
  color: #8a4c34;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 8px 18px rgba(96, 62, 33, .035);
}

html[data-theme="light"] body[data-page="shop"] .filter-reset:hover {
  text-decoration: none;
  border-color: rgba(138, 76, 52, .24);
  background:
    linear-gradient(150deg, #fff 0%, #fff 58%, #fff5e8 100%);
}

@media (max-width: 900px) {
  body[data-page="shop"] .filters-backdrop {
    z-index: 5500 !important;
  }

  body[data-page="shop"] .shop-filters {
    position: fixed !important;
    z-index: 5600 !important;
  }

  body[data-page="shop"] .shop-filters.is-open {
    z-index: 5600 !important;
    transform: translateY(0) !important;
  }

  body.is-filters-open .bottom-nav,
  body[data-page="shop"].is-filters-open .bottom-nav,
  body[data-page="shop"].is-filters-open .cart-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

html[data-theme="light"] body.app-page .customer-support {
  background:
    radial-gradient(circle at 12% 0, rgba(240, 154, 95, .24), transparent 42%),
    linear-gradient(140deg, #8a5a34 0%, #5b3c25 46%, #2c1c11 100%);
  color: #fff4ee;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 18px 44px rgba(143, 60, 34, .24);
}

html[data-theme="light"] body.app-page .customer-support b { color: #fff4ee; }
html[data-theme="light"] body.app-page .customer-support span { color: rgba(255, 248, 238, .74); }
html[data-theme="light"] body.app-page .customer-support > svg { color: #ffb08f; }
html[data-theme="light"] body.app-page .customer-support button {
  color: #fff4ee;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .2);
}

html[data-theme="light"] body.app-page .desk-panel--tight {
  background:
    radial-gradient(circle at 16% 0, rgba(240, 154, 95, .28), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .12), transparent 36%),
    linear-gradient(150deg, #9a6339 0%, #684229 48%, #2f1e13 100%);
  color: #fff4ee;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(143, 60, 34, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}

html[data-theme="light"] body.app-page .desk-panel--tight .desk-label,
html[data-theme="light"] body.app-page .desk-panel--tight .desk-panel__icon {
  color: #ffb08f;
}

html[data-theme="light"] body.app-page .desk-panel--tight h2,
html[data-theme="light"] body.app-page .desk-panel--tight .reward-lines b,
html[data-theme="light"] body.app-page .desk-panel--tight .reward-ring strong {
  color: #fff4ee;
}

html[data-theme="light"] body.app-page .desk-panel--tight .reward-lines span,
html[data-theme="light"] body.app-page .desk-panel--tight .reward-ring span {
  color: rgba(255, 248, 238, .74);
}

html[data-theme="light"] body.app-page .desk-panel--tight .desk-panel__head,
html[data-theme="light"] body.app-page .desk-panel--tight .reward-lines div {
  border-color: rgba(255, 255, 255, .22);
}

html[data-theme="light"] body.app-page .desk-panel--tight .reward-ring {
  background:
    radial-gradient(circle, #3a2416 0 56%, transparent 57%),
    conic-gradient(#ffb08f calc(var(--p) * 1%), rgba(255, 255, 255, .24) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 26px rgba(42, 29, 20, .16);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight {
  position: relative;
  overflow: hidden;
  color: #fffaf3;
  border-color: transparent;
  background:
    radial-gradient(circle at 12% -12%, rgba(255, 255, 255, .16) 0 78px, transparent 80px),
    radial-gradient(circle at 102% 104%, rgba(255, 255, 255, .1) 0 74px, transparent 76px),
    linear-gradient(170deg, #7c3f14 0%, #54280b 48%, #361808 100%);
  box-shadow: 0 18px 42px rgba(94, 46, 18, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::before,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::before,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight::before,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::after,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::after,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::before,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::before,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight::before {
  width: 160px;
  height: 160px;
  top: -58px;
  right: -48px;
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::after,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::after,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight::after {
  width: 110px;
  height: 110px;
  bottom: -42px;
  left: -34px;
  background: rgba(255, 255, 255, .045);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet > *,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty > *,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight > * {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet > span,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty > span {
  background: rgba(255, 255, 255, .14);
  color: #fff4ee;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet small,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty small,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet i,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty i {
  color: rgba(255, 250, 243, .88) !important;
  text-shadow: 0 1px 10px rgba(32, 15, 5, .16);
}

html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet strong,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty strong {
  color: #fffaf7 !important;
  text-shadow: 0 2px 14px rgba(32, 15, 5, .18);
}

html[data-theme="light"] body[data-page="account"] .customer-main-grid .desk-panel--tight {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 12% -12%, rgba(255, 255, 255, .16) 0 78px, transparent 80px) padding-box,
    radial-gradient(circle at 102% 104%, rgba(255, 255, 255, .1) 0 74px, transparent 76px) padding-box,
    linear-gradient(170deg, #7c3f14 0%, #54280b 48%, #361808 100%) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .025) 38%, rgba(247, 212, 164, .12) 70%, rgba(255, 255, 255, 0)) border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  box-shadow: 0 18px 42px rgba(94, 46, 18, .17), inset 0 1px 0 rgba(255, 255, 255, .055);
}

html[data-theme="light"] body[data-page="account"] .wallet-hero {
  min-height: 260px;
  background:
    radial-gradient(circle at 12% -12%, rgba(255, 255, 255, .18) 0 80px, transparent 82px),
    radial-gradient(circle at 102% 102%, rgba(255, 255, 255, .11) 0 76px, transparent 78px),
    linear-gradient(135deg, #e6953a 0%, #c85a2a 60%, #8a3d20 100%);
  box-shadow: 0 18px 44px rgba(200, 90, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight .desk-label,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .desk-panel__icon {
  color: rgba(255, 250, 243, .72);
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight h2,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-lines b,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-ring strong {
  color: #fffaf3;
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight .wallet-hint,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-lines span,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-ring span {
  color: rgba(255, 250, 243, .7);
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight .desk-panel__head,
html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-lines div {
  border-color: rgba(255, 255, 255, .16);
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight .reward-ring {
  margin: auto;
  background:
    radial-gradient(circle, rgba(54, 24, 8, .96) 0 56%, transparent 57%),
    conic-gradient(#f7d4a4 calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 30px rgba(32, 15, 5, .16);
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2),
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3),
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty {
  color: var(--text);
  border-color: var(--page-card-border) !important;
  background: var(--page-card-bg) !important;
  box-shadow: var(--page-card-shadow) !important;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2)::before,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3)::before,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2)::after,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3)::after,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::before,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::before,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet::after,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty::after {
  content: none;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2) > span,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3) > span,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet > span,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty > span {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2) small,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3) small,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet small,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty small {
  color: var(--muted) !important;
  text-shadow: none;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2) strong,
html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3) strong,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet strong,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty strong {
  color: var(--text-strong) !important;
  text-shadow: none;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(2) i,
html[data-theme="light"] body[data-page="account"] .customer-kpi--wallet i {
  color: var(--muted-2) !important;
  text-shadow: none;
}

html[data-theme="light"] body[data-page="account"] .customer-kpis article:nth-child(3) i,
html[data-theme="light"] body[data-page="account"] .customer-kpi--loyalty i {
  color: var(--desk-ok) !important;
  text-shadow: none;
}

html[data-theme="light"] body[data-page="account"] .customer-main-grid .desk-panel--tight {
  border-color: transparent !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 238, .98), rgba(237, 210, 173, .94) 48%, rgba(200, 146, 91, .92)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 42%, rgba(193, 90, 56, .10), rgba(255, 255, 255, 0)) border-box !important;
  box-shadow: 0 18px 42px rgba(96, 62, 33, .12), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

html[data-theme="light"] body[data-page="account"] .desk-panel--tight:not(.wallet-hero) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 238, .98), rgba(237, 210, 173, .94) 48%, rgba(200, 146, 91, .92)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .035) 44%, rgba(193, 90, 56, .075), rgba(255, 255, 255, 0)) border-box !important;
  box-shadow: 0 18px 42px rgba(96, 62, 33, .11), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* Final scoped polish: vendor stock warning + account loyalty card */
.vendor-stock-card .vendor-stock-list {
  grid-template-columns: 1fr;
  gap: 0;
}
.vendor-stock-card .vendor-stock-item {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 96px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.vendor-stock-card .vendor-stock-item + .vendor-stock-item {
  border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}
.vendor-stock-card .vendor-stock-item img {
  width: 76px;
  height: 76px;
  grid-column: 1;
  grid-row: 1;
  border-radius: 16px;
}
.vendor-stock-info {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.vendor-stock-info strong {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 950;
}
.vendor-stock-card .vendor-stock-item .stock-badge {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  min-height: 25px;
  padding-inline: 10px;
  font-size: 10.5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-strong);
}
.vendor-stock-card .vendor-stock-item--pending {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 0;
}
.vendor-stock-card .vendor-stock-item--pending .list-row__body b {
  color: var(--text-strong);
}
.vendor-stock-card .vendor-stock-item--pending .list-row__body small {
  color: var(--muted);
}
html[data-theme="light"] .vendor-stock-card {
  color: #2a1d14 !important;
  border-color: rgba(143, 60, 34, .14) !important;
  background:
    radial-gradient(circle at 14% 0, rgba(193, 90, 56, .10), transparent 38%),
    linear-gradient(145deg, #fffaf7, #fff1eb) !important;
  box-shadow: 0 16px 34px rgba(96, 62, 33, .10), inset 0 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .vendor-stock-card .desk-label,
html[data-theme="light"] .vendor-stock-card .desk-panel__icon {
  color: #c15a38 !important;
}
html[data-theme="light"] .vendor-stock-card h2,
html[data-theme="light"] .vendor-stock-card .vendor-stock-item b,
html[data-theme="light"] .vendor-stock-card .vendor-stock-item--pending .list-row__body b {
  color: #24160d !important;
}
html[data-theme="light"] .vendor-stock-card .vendor-stock-item small,
html[data-theme="light"] .vendor-stock-card .vendor-stock-item--pending .list-row__body small {
  color: #735f4e !important;
}
html[data-theme="light"] .vendor-stock-card .vendor-stock-item {
  border-color: rgba(143, 60, 34, .10);
  background: transparent;
}
html[data-theme="light"] .vendor-stock-card .vendor-stock-info strong {
  color: #24160d !important;
}

.vendor-stock-card .vendor-stock-cta {
  width: min(210px, 100%);
  height: 36px;
  min-height: 36px;
  margin-top: 4px;
  justify-self: center;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}
.vendor-stock-card .vendor-stock-cta:hover {
  transform: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: none;
}
html[data-theme="light"] .vendor-stock-card .vendor-stock-cta {
  color: #24160d;
  border-color: rgba(143, 60, 34, .20);
}
html[data-theme="light"] .vendor-stock-card .vendor-stock-cta:hover {
  background: rgba(193, 90, 56, .07);
}

body[data-page="account"] .loyalty-card {
  min-height: 300px;
  border: 1px solid rgba(255, 176, 143, .18) !important;
  background:
    radial-gradient(circle at 14% 0, rgba(240, 154, 95, .18), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(255, 176, 143, .09), transparent 34%),
    linear-gradient(145deg, #130c08 0%, #2f1e13 54%, #8f3c22 100%) !important;
  color: #fff4ee !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
body[data-page="account"] .customer-main-grid .desk-panel--tight.loyalty-card:not(.wallet-hero) {
  background:
    radial-gradient(circle at 14% 0, rgba(240, 154, 95, .18), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(255, 176, 143, .09), transparent 34%),
    linear-gradient(145deg, #130c08 0%, #2f1e13 54%, #8f3c22 100%) !important;
  color: #fff4ee !important;
}
body[data-page="account"] .loyalty-card::before,
body[data-page="account"] .loyalty-card::after {
  content: none !important;
}
body[data-page="account"] .loyalty-card .desk-label,
body[data-page="account"] .loyalty-card .desk-panel__icon {
  color: #ffb08f !important;
}
body[data-page="account"] .loyalty-card h2,
body[data-page="account"] .loyalty-card .reward-lines b,
body[data-page="account"] .loyalty-card .reward-ring strong {
  color: #fff4ee !important;
  text-shadow: none !important;
}
body[data-page="account"] .loyalty-card .reward-lines span,
body[data-page="account"] .loyalty-card .reward-ring span {
  color: rgba(255, 248, 237, .72) !important;
  text-shadow: none !important;
}
body[data-page="account"] .loyalty-card .desk-panel__head,
body[data-page="account"] .loyalty-card .reward-lines div {
  border-color: rgba(255, 248, 237, .16) !important;
}
body[data-page="account"] .loyalty-card .reward-lines div {
  min-height: 42px;
  align-items: center;
  padding-inline: 10px;
  border: 1px solid rgba(255, 248, 237, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
}
body[data-page="account"] .loyalty-card .reward-ring {
  background:
    radial-gradient(circle, #130c08 0 56%, transparent 57%),
    conic-gradient(#ffb08f calc(var(--p) * 1%), rgba(255, 248, 237, .18) 0) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 237, .14), 0 12px 28px rgba(0, 0, 0, .18) !important;
}
html[data-theme="light"] body[data-page="account"] .loyalty-card {
  color: #fff4ee !important;
  border: 1px solid rgba(255, 176, 143, .20) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(240, 154, 95, .20), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(255, 248, 237, .10), transparent 36%),
    linear-gradient(150deg, #1a100a 0%, #3a2416 52%, #8f3c22 100%) !important;
  box-shadow: 0 18px 44px rgba(42, 29, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}
html[data-theme="light"] body[data-page="account"] .customer-main-grid .desk-panel--tight.loyalty-card:not(.wallet-hero) {
  border: 1px solid rgba(255, 176, 143, .20) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(240, 154, 95, .20), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(255, 248, 237, .10), transparent 36%),
    linear-gradient(150deg, #1a100a 0%, #3a2416 52%, #8f3c22 100%) !important;
  color: #fff4ee !important;
}
html[data-theme="light"] body[data-page="account"] .loyalty-card .desk-label,
html[data-theme="light"] body[data-page="account"] .loyalty-card .desk-panel__icon {
  color: #ffb08f !important;
}
html[data-theme="light"] body[data-page="account"] .loyalty-card h2,
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-lines b,
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-ring strong {
  color: #fff4ee !important;
}
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-lines span,
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-ring span {
  color: rgba(255, 248, 237, .74) !important;
}
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-lines div {
  border-color: rgba(255, 248, 237, .16) !important;
  background: rgba(255, 255, 255, .06);
}
html[data-theme="light"] body[data-page="account"] .loyalty-card .reward-ring {
  background:
    radial-gradient(circle, #1a100a 0 56%, transparent 57%),
    conic-gradient(#ffb08f calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 237, .16), 0 12px 28px rgba(42, 29, 20, .18) !important;
}

@media (max-width: 640px) {
  .vendor-stock-card .vendor-stock-list {
    grid-template-columns: 1fr;
  }
  .vendor-stock-card .vendor-stock-item {
    min-height: 86px;
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }
  .vendor-stock-card .vendor-stock-item img {
    width: 64px;
    height: 64px;
  }
}

html[data-theme="light"] body[data-page="cart"] .checkout-panel,
html[data-theme="light"] body[data-page="cart"] .cart-summary.invoice {
  border-color: var(--page-card-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 64%, rgba(255, 249, 241, .86) 100%);
  box-shadow: 0 16px 38px rgba(96, 62, 33, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html[data-theme="light"] body[data-page="cart"] .addr-item,
html[data-theme="light"] body[data-page="cart"] .ship-opt {
  border-color: rgba(143, 60, 34, .12);
  background: linear-gradient(150deg, #fff 0%, #fff 64%, #fff7ec 100%);
  box-shadow: 0 10px 24px rgba(96, 62, 33, .045);
}

html[data-theme="light"] body[data-page="cart"] .addr-item:hover,
html[data-theme="light"] body[data-page="cart"] .ship-opt:hover {
  border-color: rgba(143, 60, 34, .20);
  box-shadow: 0 14px 30px rgba(96, 62, 33, .075);
}

html[data-theme="light"] body[data-page="cart"] .addr-item.is-sel,
html[data-theme="light"] body[data-page="cart"] .ship-opt.is-sel {
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(143, 60, 34, .18));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 248, 239, .92)),
    color-mix(in srgb, var(--accent) 7%, transparent);
}

html[data-theme="light"] body[data-page="cart"] .addr-ic {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent-strong);
}

/* Light form controls: final page-level override for inputs and dropdowns */
html[data-theme="light"] body.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] body.app-page select,
html[data-theme="light"] body.app-page textarea,
html[data-theme="light"] body.app-page .modal-select {
  border: 1px solid rgba(143, 60, 34, .14);
  background: linear-gradient(150deg, #fff 0%, #fff 68%, #fff3ee 100%);
  color: #2a1d14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 8px 18px rgba(96, 62, 33, .035);
}

html[data-theme="light"] body.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
html[data-theme="light"] body.app-page select:focus,
html[data-theme="light"] body.app-page textarea:focus,
html[data-theme="light"] body.app-page .modal-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(143, 60, 34, .18));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

html[data-theme="light"] body.app-page select,
html[data-theme="light"] body.app-page .modal-select {
  cursor: pointer;
}

html[data-theme="light"] .site-search__box input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* =========================================================================
   فروشگاه ۲.۰ — کارت محصول پرمیوم + ارتقای فیلترها و چیپ‌ها
   ========================================================================= */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }

.shop-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-raised), var(--surface)); overflow: hidden; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.shop-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .65); }
/* بردر گرادیانی محوشونده زیر کارت هنگام هاور */
.shop-card::after { content: ""; position: absolute; inset-inline: 14%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.shop-card:hover::after { opacity: 1; }
/* لایت: سایهٔ هاور گرم و ملایم به‌جای سایهٔ تیره */
html[data-theme="light"] .shop-card:hover { box-shadow: 0 20px 40px -22px rgba(96, 62, 33, .35); }
/* موبایل: همان افکت هاور وقتی کارت به میانهٔ ویوپورت می‌رسد (کلاس از shop.js) */
@media (hover: none) {
  .shop-card.is-inview { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .65); }
  .shop-card.is-inview::after { opacity: 1; }
  .shop-card.is-inview .shop-card__media img { transform: scale(1.05); }
  html[data-theme="light"] .shop-card.is-inview { box-shadow: 0 20px 40px -22px rgba(96, 62, 33, .35); }
}
.shop-card__badge { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #241609; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.shop-card__fav { position: absolute; top: 14px; left: 14px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 65%, transparent); backdrop-filter: blur(6px); color: var(--text); cursor: pointer; transition: .2s var(--ease); }
.shop-card__fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-card__fav:hover, .shop-card__fav.is-active { color: #e2574b; border-color: #e2574b; }
.shop-card__fav.is-active svg { fill: currentColor; }
.shop-card__media { position: relative; display: block; margin: 10px 10px 0; border-radius: 16px; aspect-ratio: 1 / .82; overflow: hidden; }
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.shop-card:hover .shop-card__media img { transform: scale(1.05); }
.shop-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 15px; flex: 1; }
.shop-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-card__roaster { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.shop-card__roaster svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); }
.shop-card__rating svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.shop-card h3 { margin: 0; font-size: 15.5px; line-height: 1.6; }
.shop-card h3 a { color: var(--text-strong); text-decoration: none; }
.shop-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-card__chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--glass); font-size: 11px; color: var(--muted); }
.shop-card__chips svg { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--line); }
.shop-card__price b { display: inline-block;
  font-size: 14.5px;
  color: var(--text-strong);
  padding-left: 3px; }
.shop-card__price small { font-size: 11px; color: var(--muted-2); }
.shop-card__btns { display: flex; align-items: center; gap: 7px; }
.shop-card__more { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--accent-strong); font-size: 12.5px; font-weight: 800; text-decoration: none; transition: .2s var(--ease); }
.shop-card__more:hover { background: var(--glass); border-color: var(--accent); }
.shop-card__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-card__cart { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #241609; cursor: pointer; transition: .2s var(--ease); }
.shop-card__cart:hover { filter: brightness(1.1); transform: scale(1.06); }
.shop-card__cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-card__cart.added { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }
@media (max-width: 560px) {
  .shop-card__media { margin: 8px 8px 0; }
  .shop-card__more { height: 36px; padding: 0 10px; font-size: 11.5px; }
  .shop-card__cart { width: 36px; height: 36px; }
  .shop-card__price b { font-size: 15px; }
}

/* چیپ‌های دسته‌بندی با آیکون */
.filter-chips .chip { display: inline-flex; align-items: center; gap: 7px; }
.filter-chips .chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* شمارندهٔ نتایج به‌صورت قرص */
.shop-bar .shop-count { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--glass); }

/* پنل فیلتر: تیترهای آیکون‌دار + گزینه‌های انتخابی مدرن */
.filter-group h4 { display: flex; align-items: center; gap: 7px; }
.filter-group h4 svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-check { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 7px; transition: .18s var(--ease); }
.filter-check:hover { border-color: var(--line-strong); background: var(--glass); }
.filter-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); font-weight: 700; }
.filter-price-val { display: inline-flex; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--glass); }
.filter-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border: 1px dashed color-mix(in srgb, var(--danger, #e2574b) 55%, transparent); border-radius: var(--radius-pill); text-align: center; }
.filter-reset:hover { text-decoration: none; background: color-mix(in srgb, var(--danger, #e2574b) 8%, transparent); }
.filter-reset svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   فروشنده شوید ۲.۰ — لندینگ + فرم ویزارد
   ========================================================================= */
.vr-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: center; padding: 34px 0 10px; }
.vr-hero__copy h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 42px); line-height: 1.5; color: var(--text-strong); letter-spacing: -1px; }
.vr-hero__copy p { margin: 0; max-width: 560px; color: var(--muted); line-height: 2; }
.vr-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.vr-cta { width: auto; padding-inline: 26px; }
.vr-cta svg, .vr-next svg, .vr-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vr-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.vr-hint svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.vr-hero__stats { display: grid; gap: 12px; }
.vr-stat { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.vr-stat svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vr-stat b { font-size: 18px; color: var(--text-strong); }
.vr-stat span { font-size: 12px; color: var(--muted); }

.vr-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 26px; }
.vr-benefit { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: .2s var(--ease); }
.vr-benefit:hover { border-color: var(--accent); transform: translateY(-3px); }
.vr-benefit svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.vr-benefit b { color: var(--text-strong); font-size: 14.5px; }
.vr-benefit span { font-size: 12.5px; color: var(--muted); line-height: 1.9; }

.vr-steps { display: flex; align-items: stretch; gap: 10px; margin-top: 26px; }
.vr-step-item { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 18px 18px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--glass); }
.vr-step-item__num { position: absolute; top: 12px; left: 14px; font-size: 26px; font-weight: 900; color: color-mix(in srgb, var(--accent) 30%, transparent); }
.vr-step-item svg { width: 26px; height: 26px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vr-step-item b { color: var(--text-strong); font-size: 14.5px; }
.vr-step-item span { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.vr-step-arrow { align-self: center; color: var(--accent); }
.vr-step-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.vr-formwrap { max-width: 780px; margin-top: 34px; padding-bottom: 70px; }
.vr-panel { background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; }
.vr-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.vr-dot { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; cursor: default; color: var(--muted); }
.vr-dot i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass); font-style: normal; font-weight: 800; font-size: 13px; transition: .2s var(--ease); }
.vr-dot em { font-style: normal; font-size: 13px; font-weight: 700; }
.vr-dot.is-active i { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #241609; border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.vr-dot.is-active em { color: var(--text-strong); }
.vr-dot.is-done { cursor: pointer; }
.vr-dot.is-done i { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); border-color: var(--accent); }
.vr-stepline { flex: 1; height: 1px; background: var(--line-strong); }
.vr-step { display: none; }
.vr-step.is-active { display: block; animation: vrFade .3s var(--ease); }
@keyframes vrFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vr-step__title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 16.5px; color: var(--text-strong); }
.vr-step__title svg { width: 19px; height: 19px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.vr-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.vr-type__opt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s var(--ease); }
.vr-type__opt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vr-type__opt:hover { border-color: var(--accent); }
.vr-type__opt.is-active { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent-strong); }

.vr-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vr-upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; cursor: pointer; transition: .2s var(--ease); }
.vr-upload:hover { border-color: var(--accent); background: var(--glass); }
.vr-upload__ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vr-upload b { color: var(--text-strong); font-size: 13.5px; }
.vr-upload span { font-size: 11.5px; color: var(--muted); direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-upload__check { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent); color: #241609; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: .25s var(--ease); }
.vr-upload.has-file { border-style: solid; border-color: var(--accent); }
.vr-upload.has-file .vr-upload__check { opacity: 1; transform: none; }
.vr-sheba { letter-spacing: 1.5px; }
.vr-agree { display: flex; align-items: flex-start; gap: 9px; margin-top: 4px; font-size: 13px; color: var(--muted); cursor: pointer; line-height: 1.9; }
.vr-agree input { accent-color: var(--accent); width: 17px; height: 17px; margin-top: 4px; }
.vr-agree a { color: var(--accent); }

.vr-nav { display: flex; gap: 10px; margin-top: 20px; }
.vr-next { flex: 1; }
.vr-back { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: .18s var(--ease); }
.vr-back:hover { border-color: var(--accent); }

.vr-success { text-align: center; padding: 44px 26px; }
.vr-success__ic { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid var(--accent); }
.vr-success__ic svg { width: 34px; height: 34px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vr-success h2 { margin: 0 0 10px; color: var(--text-strong); }
.vr-success p { margin: 0 auto 16px; max-width: 420px; color: var(--muted); line-height: 2; }
.vr-success__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.vr-success__actions .btn-primary { width: auto; padding-inline: 30px; }
.vr-back-home { font-size: 13px; color: var(--muted); }

html[data-theme="light"] body.app-page .vr-panel,
html[data-theme="light"] body.app-page .vr-stat,
html[data-theme="light"] body.app-page .vr-benefit {
  border-color: var(--page-card-border);
  background: var(--page-card-bg);
  box-shadow: var(--page-card-shadow);
}

@media (max-width: 900px) {
  .vr-hero { grid-template-columns: 1fr; }
  .vr-hero__stats { grid-template-columns: repeat(3, 1fr); }
  .vr-stat { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 6px; }
  .vr-stat svg { grid-row: auto; }
  .vr-steps { flex-direction: column; }
  .vr-step-arrow { transform: rotate(-90deg); }
}
@media (max-width: 640px) {
  /* سه کارت آمار جمع‌وجور در یک ردیف */
  .vr-hero__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vr-stat { padding: 10px 6px; row-gap: 3px; }
  .vr-stat svg { width: 30px; height: 30px; padding: 6px; border-radius: 10px; }
  .vr-stat b { font-size: 14px; }
  .vr-stat span { font-size: 10.5px; line-height: 1.6; }
  .vr-dot em { display: none; }
  .vr-dot.is-active em { display: inline; }
  .vr-type { grid-template-columns: 1fr; }
  .vr-uploads { grid-template-columns: 1fr; }
  .vr-panel { padding: 20px 16px; }
}

/* =========================================================================
   نظر و امتیاز کاربران (کامپوننت مشترک ستاره + بخش نظرات محصول)
   ========================================================================= */
/* --- کامپوننت مشترک ستاره (پر/خالی ساده، بدون روی‌هم‌افتادگی) --- */
.rating-stars { display: inline-flex; align-items: center; gap: 3px; direction: ltr; line-height: 0; vertical-align: middle; }
.rating-stars .rating-star { width: var(--star, 15px); height: var(--star, 15px); display: block; fill: color-mix(in srgb, var(--muted) 34%, transparent); stroke: none; }
.rating-stars .rating-star.is-on { fill: var(--gold); }

/* --- ورودی امتیاز تعاملی (فرم ثبت نظر) --- */
.star-input { display: inline-flex; gap: 6px; direction: ltr; }
.star-input__btn { padding: 2px; border: 0; background: none; cursor: pointer; line-height: 0; color: var(--line-strong); transition: transform .12s var(--ease), color .12s var(--ease); }
.star-input__btn svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.star-input__btn:hover { transform: scale(1.12); }
.star-input__btn.is-on { color: var(--gold); }
.rv-field-star .star-input { margin-top: 4px; }

/* --- سربرگ و اکشن‌های بخش نظرات --- */
.product-page .product-reviews-section { padding: 16px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-strong); font-size: 16px; font-weight: 950; }
.rv-title span { color: var(--muted); font-size: 12px; font-weight: 700; }
.rv-title__ic { width: 19px; height: 19px; color: var(--accent-strong); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rv-actions { display: inline-flex; align-items: center; gap: 10px; }
/* هر دو دکمه یک اصل: outline-btn استاندارد سایت با ابعاد یکسان */
.rv-actions .outline-btn { height: 40px; min-height: 40px; min-width: 0; padding-inline: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 800; border-radius: var(--radius-pill); white-space: nowrap; }
.rv-btn-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --- چیدمان بدنه: خلاصهٔ امتیاز + لیست نظرات (هم‌ارتفاع و تراز) --- */
.rv-body { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: stretch; }
.rv-summary { border-radius: 16px; padding: 16px; display: grid; gap: 14px; align-content: start; }
.rv-summary__score { display: grid; justify-items: center; gap: 6px; text-align: center; }
.rv-summary__score strong { font-size: 38px; font-weight: 950; color: var(--text-strong); line-height: 1; }
.rv-summary__score small { color: var(--muted); font-size: 11px; }
.rv-bars { display: grid; gap: 7px; }
.rv-bar { display: grid; grid-template-columns: 30px 1fr 34px; align-items: center; gap: 8px; }
.rv-bar__n { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 800; }
.rv-bar__n svg { width: 11px; height: 11px; fill: var(--gold); stroke: none; }
.rv-bar__track { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.rv-bar__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--accent-strong)); }
.rv-bar__pct { color: var(--muted); font-size: 10px; text-align: left; direction: ltr; }

/* --- کارت نظر --- */
.rv-list { display: grid; gap: 10px; grid-auto-rows: 1fr; }
.rv-card { border-radius: 14px; padding: 13px; display: block; grid-template-rows: auto 1fr; gap: 9px; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.rv-card:hover { transform: translateY(-1px); }
.rv-card__top { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.rv-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rv-av--txt { display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--line); color: var(--accent-strong); font-weight: 950; font-size: 15px; }
.rv-card__who strong { display: block; color: var(--text-strong); font-size: 12px; font-weight: 900; }
.rv-card__who small { color: var(--muted); font-size: 10px; }
.rv-card__title { margin: 16px 0 14px 0; color: var(--text-strong); font-size: 12px; font-weight: 900; }
.rv-verified { display: inline-flex; margin-inline-start: 5px; color: var(--success, #2fae6f); font-weight: 850; }
.rv-card p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.9; }
.rv-empty { grid-column: 1 / -1; margin: 0; padding: 26px; color: var(--muted); font-size: 12px; text-align: center; }
.rv-eligibility { margin: -4px 0 12px; color: var(--muted); font-size: 11px; }
.rv-pagination { display: flex; justify-content: center; margin-top: 12px; }

/* کارت‌های نظر و خلاصهٔ امتیاز: پایهٔ دارک = هم‌رنگ کارت رستری (surface-raised)؛
   لایت از رول گروهی page-card (بالا) و پاپ‌آپ از رول 150deg پایین می‌آید — اینجا رنگ لایت هاردکد نکن (دارک را می‌شکند). */
.product-page .rv-summary,
.seller-page .rv-summary,
.product-page .rv-card,
.seller-page .rv-card { border: 1px solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.product-page .rv-card:hover,
.seller-page .rv-card:hover { border-color: var(--line-strong); }

/* --- پاپ‌آپ ثبت نظر و مشاهدهٔ همه (بردر محو + شادوی بسیار کم برای عمق) --- */
.modal--review, .modal--reviews-all { border-color: color-mix(in srgb, var(--line) 55%, transparent); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .28); }
.modal--review { max-width: 460px; }
.modal--reviews-all { max-width: 560px; }
.rv-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; padding-inline-end: 30px; border-bottom: 1px solid var(--line); }
.rv-modal-head .modal-title { margin: 0; font-size: 16px; }
.rv-modal-head .modal-title span { color: var(--muted); font-size: 12px; font-weight: 700; }
.rv-summary__score--row { display: flex; align-items: center; gap: 10px; text-align: right; }

/* جداکنندهٔ بین محصولات پیشنهادی بازار */
.product-page .product-market-card .market-product + .market-product { border-top: 1px solid var(--line); padding-top: 12px; }

/* نت‌های طعمی (assets/images/notes) و روش‌های دم‌آوری (assets/images/methods) با تصویر —
   یک قانون مشترک، بدون بردر، هم‌اندازه تا ریتم سه کارتِ کنار هم حفظ شود */
.product-page .taste-list span img,
.product-page .brew-list span img { width: 47px; height: 47px; object-fit: contain; border-radius: 14px; }
.rv-summary__score--row strong { font-size: 30px; }
.rv-summary__score--row > div { display: grid; gap: 4px; justify-items: start; }
.rv-modal-list { display: grid; gap: 10px; max-height: 56vh; overflow: auto; padding-inline-end: 4px; }
.rv-modal-list .rv-card { border: 1px solid var(--line); background: var(--surface-raised); box-shadow: none; }
/* لایت: هم‌رنگ کارت‌های .popular-item خانه (آن کلاس به .home-page قفل است؛ همان مقادیر یک‌بار اینجا) */
html[data-theme="light"] body.app-page:not(.home-page) .rv-modal-list .rv-card {
  border-color: var(--page-card-border);
  background: linear-gradient(150deg, #fff 0%, #fff 64%, #fff7ec 100%);
  box-shadow: 0 10px 24px rgba(96, 62, 33, .055);
}

/* --- بج ویدیو معرفی محصول روی تصویر --- */
.video-badge { position: absolute; inset-inline-start: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill); background: rgba(22, 15, 9, .58); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); color: #fff; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease); }
.video-badge:hover { transform: translateY(-2px); background: rgba(22, 15, 9, .74); }
.video-badge__play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--gold), #c58a3e); color: #241708; }
.video-badge__play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-inline-start: 2px; }
.video-badge__txt { display: grid; gap: 1px; text-align: start; }
.video-badge__txt b { font-size: 11.5px; font-weight: 900; }
.video-badge__txt small { font-size: 9.5px; opacity: .78; }

/* --- پاپ‌آپ ویدیو --- */
.modal--video { max-width: 640px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 8, 4, .34); }
.video-frame__play span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #241708; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.video-frame__play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.video-caption { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; }

@media (max-width: 720px) {
  .rv-body { grid-template-columns: 1fr; }
  .rv-actions { width: 100%; }
  .rv-actions .outline-btn { flex: 1; }
}

/* =========================================================================
   roasters.html — تیلت سه‌بعدی کارت‌ها، لینک کارت، پنل فیلتر (پاپ‌آپ/شیت)
   ========================================================================= */
.roaster-list-grid.has-tilt { perspective: 1100px; }
.roaster-list-grid .explorer-card { transform-style: preserve-3d; will-change: transform; cursor: pointer; }

/* لینک سراسری کارت به پروفایل فروشنده؛ دکمهٔ دنبال‌کردن بالاتر می‌ماند */
.explorer-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.explorer-card .explorer-follow { position: relative; z-index: 2; }

/* نور شیشه‌ای که دنبال اشاره‌گر می‌رود */
.explorer-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 32%), color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.explorer-card:hover::after,
.explorer-card.is-lit::after { opacity: 1; }

/* حلقهٔ گرادیانی لبهٔ کارت در هاور / حالت فعال موبایل */
.explorer-card__link::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--accent-strong), var(--accent) 42%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
}
.explorer-card:hover .explorer-card__link::after,
.explorer-card.is-lit .explorer-card__link::after { opacity: .8; }
.explorer-card.is-lit {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 24px 46px rgba(96, 63, 30, .14);
}

/* ورود پلکانی کارت‌ها */
@media (prefers-reduced-motion: no-preference) {
  .roaster-list-grid .explorer-card { animation: rcRise .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes rcRise { from { opacity: 0; transform: translateY(16px); } }
}

/* دکمهٔ دنبال‌کردن در حالت فعال */
.explorer-follow.is-on {
  color: #1a120b;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
}

/* شمارندهٔ نتایج و حالت خالی */
.roaster-results { margin: -8px auto 6px; color: var(--muted); font-size: 13px; }
.roasters-empty {
  grid-column: 1 / -1; padding: 46px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.roasters-empty svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.roasters-empty p { margin: 10px 0 16px; }

/* پنل فیلتر مشترک — دسکتاپ: پاپ‌آپ */
.modal--filters { max-width: 470px; }
.rfp-grip { display: none; }
.rfp-group { margin-bottom: 16px; }
.rfp-group > b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-strong); margin-bottom: 9px; }
.rfp-group > b svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rfp-actions { display: flex; gap: 10px; margin-top: 20px; }
.rfp-actions .btn-primary { flex: 1; width: auto; }
.rfp-clear { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: var(--radius-pill); padding: 0 18px; font-size: 13px; transition: .18s var(--ease); }
.rfp-clear:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

/* موبایل: همان پنل به شیت پایین تبدیل می‌شود؛ تیلت خاموش */
@media (max-width: 840px) {
  .roaster-list-grid.has-tilt { perspective: none; }
  .roaster-list-grid .explorer-card { transform: none !important; }
  .modal-overlay.rfp-sheet { align-items: flex-end; padding: 0; }
  .modal-overlay.rfp-sheet .modal--filters {
    max-width: none; margin: 0; border-bottom: 0;
    border-radius: 22px 22px 0 0; transform: translateY(100%);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .modal-overlay.rfp-sheet.open .modal--filters { transform: none; }
  .modal--filters .modal-body { max-height: min(82vh, 640px); overflow-y: auto; }
  .rfp-grip { display: block; width: 46px; height: 4px; border-radius: 99px; background: var(--line-strong); margin: 2px auto 12px; }
}
/* نوار فیلتر رستری‌ها — هم‌خانوادهٔ فروشگاه: چیپ تخت + دکمهٔ پنل با نشانگر */
.roaster-filters-bar { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 4px 0 18px; }
.roaster-filters-bar .filter-toggle { display: inline-flex; flex: 0 0 auto; }
.roaster-filters-bar .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.roaster-filters-bar .filter-chips::-webkit-scrollbar { display: none; }
.roaster-filters-bar .chip { flex: 0 0 auto; }
.rf-badge {
  min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 2px;
  display: inline-grid; place-items: center; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b; font-size: 11px; font-weight: 800; font-style: normal;
}
.rf-badge[hidden] { display: none; }
/* موبایل/تبلت: دکمهٔ فیلتر بالای چیپ‌ها + اسلاید تمام‌عرض با لبهٔ محو (بدون کات ناگهانی) */
@media (max-width: 840px) {
  .roaster-filters-bar { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 12px; }
  .roaster-filters-bar .filter-toggle { align-self: flex-start; }
  .roaster-filters-bar .filter-chips {
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
}
/* =========================================================================
   seller2.html — پروفایل فروشندهٔ بازطراحی‌شده (فقط توکن‌ها؛ لایت/دارک/ریسپانسیو)
   ========================================================================= */
.seller2-main { padding-bottom: 40px; }
.s2-breadcrumb { margin: 16px auto 10px; }

/* ---------- هدر پروفایل ---------- */
.s2-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.s2-cover { position: relative; height: 320px; }
.s2-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-cover__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(6,5,4,.42) 62%, rgba(6,5,4,.82) 100%);
}

/* محتوای روی کاور (لوگوی بزرگ + نام سفید سایه‌دار) */
.s2-cover__overlay {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 20px; padding: 26px;
}
.s2-cover__title { padding-bottom: 6px; }
.s2-cover__title h1 {
  margin: 0 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: #fff; font-size: 34px; font-weight: 950; line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
}
.s2-cover__tools { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; gap: 8px; }
.s2-glass-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); background: rgba(20,16,12,.42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; transition: transform .2s var(--ease), background .2s var(--ease);
}
.s2-glass-btn:hover { transform: translateY(-2px); background: rgba(20,16,12,.62); }
.s2-glass-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s2-cover__badge {
  position: absolute; top: 16px; inset-inline-end: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800;
  color: #1a120b; background: linear-gradient(135deg, var(--gold), var(--accent-strong));
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.s2-cover__badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.s2-avatar {
  flex: 0 0 auto;
  width: 128px; height: 128px; border-radius: 28px; display: grid; place-items: center; text-align: center;
  border: 3px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 35% 28%, #2c2018, #0d0a07);
  color: var(--accent-strong); box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.s2-avatar span { font-size: 9px; letter-spacing: 2px; opacity: .85; }
.s2-avatar svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.5; margin: 3px 0; }
.s2-avatar strong { font-family: Georgia, serif; font-size: 23px; letter-spacing: 1px; }

.s2-verified {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800;
  color: #eafff3; background: rgba(38,150,95,.55);
  border: 1px solid rgba(120,230,175,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.s2-verified svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.s2-meta { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: rgba(255,255,255,.92); font-size: 13.5px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.s2-meta span { display: inline-flex; align-items: center; gap: 5px; }
.s2-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.s2-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.6); }
.s2-rating-inline { display: inline-flex; align-items: center; gap: 8px; }
.s2-stars { position: relative; display: inline-block; direction: ltr; line-height: 0; }
.s2-stars__row { display: inline-flex; gap: 2px; }
.s2-stars__row svg { width: 18px; height: 18px; }
.s2-stars__base svg { fill: rgba(255,255,255,.3); }
.s2-stars__fill { position: absolute; inset: 0; width: var(--fill, 0%); overflow: hidden; white-space: nowrap; }
.s2-stars__fill svg { fill: var(--gold); }
.s2-rating-inline strong { color: #fff; font-size: 16px; font-weight: 900; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.s2-rating-inline small { color: rgba(255,255,255,.85); font-size: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.s2-headline { display: flex; justify-content: flex-end; padding: 16px 26px; }
.s2-cta { display: flex; gap: 10px; }
.s2-follow, .s2-msg {
  height: 46px; padding: 0 22px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 14px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.s2-follow { border: 0; color: #1a120b; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 12px 26px rgba(150,95,45,.24); }
.s2-follow:hover { transform: translateY(-2px); }
.s2-follow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.s2-follow .ic-check { display: none; }
.s2-follow.is-on { background: var(--surface-muted); color: var(--text); box-shadow: none; }
.s2-follow.is-on .ic-plus { display: none; }
.s2-follow.is-on .ic-check { display: inline; }
.s2-msg { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.s2-msg:hover { border-color: var(--accent); color: var(--accent-strong); }
.s2-msg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.s2-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.s2-stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 8px;
  position: relative;
}
.s2-stat + .s2-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.s2-stat svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.7; margin-bottom: 2px; }
.s2-stat strong { color: var(--text-strong); font-size: 17px; font-weight: 950; }
.s2-stat span { color: var(--muted); font-size: 11.5px; }

/* ---------- ارزش‌ها ---------- */
.s2-highlights { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.s2-highlights article {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card);
}
.s2-hl-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.s2-hl-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.s2-highlights strong { display: block; color: var(--text-strong); font-size: 14px; font-weight: 900; }
.s2-highlights small { color: var(--muted); font-size: 11.5px; }

/* ---------- کیکر عمومی ---------- */
.s2-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-strong); font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.s2-kicker svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- داستان (تصویر جمع‌وجور هم‌قد متن، بدون فضای خالی) ---------- */
.s2-about { margin-top: 20px; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 20px; align-items: stretch; }
.s2-about__media { position: relative; min-height: 260px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-raised); }
.s2-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-about__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s ease; }
.s2-about__slide.is-active { opacity: 1; visibility: visible; }
.s2-about__dots { position: absolute; z-index: 2; inset-inline: 12px; bottom: 12px; display: flex; justify-content: center; gap: 7px; }
.s2-about__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 1px 5px rgba(0,0,0,.25); cursor: pointer; transition: width .2s ease, background .2s ease; }
.s2-about__dot.is-active { width: 22px; border-radius: 999px; background: #fff; }
.s2-about__text {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card);
  padding: 24px; display: flex; flex-direction: column;
}
.s2-about__text h2 { margin: 0 0 12px; color: var(--text-strong); font-size: 21px; font-weight: 950; line-height: 1.5; }
.s2-about__text > p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 2.1; }
.s2-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s2-facts li { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 8px; font-size: 12.5px; }
.s2-facts svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.s2-facts span { color: var(--muted); }
.s2-facts b { color: var(--text-strong); font-weight: 800; justify-self: start; }
.s2-social { display: flex; gap: 10px; margin-top: auto; }
.s2-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.s2-social a:hover { transform: translateY(-2px); color: var(--accent-strong); border-color: var(--accent); }
.s2-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- محصولات ---------- */
.s2-products { margin-top: 26px; }
.s2-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.s2-sec-head h2 { margin: 0; color: var(--text-strong); font-size: 22px; font-weight: 950; }
.s2-textlink { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-strong); font-size: 13px; font-weight: 800; }
.s2-textlink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.s2-prod-filters { margin: 14px 0 18px; }
/* محصولات از همان کارت فروشگاه (.shop-card / .shop-grid) استفاده می‌کنند */

/* ---------- کافی مچ ---------- */
.s2-match {
  margin-top: 26px; display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius-xl);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface-raised)), var(--surface-raised));
  box-shadow: var(--shadow-card);
}
.s2-match__ic { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #1a120b; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.s2-match__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.s2-match__text { flex: 1 1 auto; }
.s2-match__text h2 { margin: 0 0 5px; color: var(--text-strong); font-size: 18px; font-weight: 950; }
.s2-match__text p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.s2-match__btn { flex: 0 0 auto; height: 46px; padding: 0 22px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; color: #1a120b; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 12px 26px rgba(150,95,45,.22); transition: transform .2s var(--ease); }
.s2-match__btn:hover { transform: translateY(-2px); }
.s2-match__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- نظرات: خلاصه + اسلایدر کارت‌های ایستاده ---------- */
.s2-reviews { margin-top: 26px; }
.s2-rv-summary { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.s2-rv-avg { color: var(--text-strong); font-size: 30px; font-weight: 950; line-height: 1; }
.s2-rv-count { color: var(--muted); font-size: 13px; }
.s2-rvs { position: relative; display: inline-block; direction: ltr; line-height: 0; }
.s2-rvs__row { display: inline-flex; gap: 2px; }
.s2-rvs__row svg { width: 17px; height: 17px; }
.s2-rvs__base svg { fill: color-mix(in srgb, var(--muted) 40%, transparent); }
.s2-rvs__fill { position: absolute; inset: 0; width: var(--fill, 0%); overflow: hidden; white-space: nowrap; }
.s2-rvs__fill svg { fill: var(--gold); }

.s2-rv-shell { margin-top: 6px; }
.s2-rv-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; }
.s2-rv-slider::-webkit-scrollbar { display: none; }
.s2-rv-card {
  flex: 0 0 300px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: var(--shadow-card);
  padding: 20px 18px 18px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.s2-rv-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 22px 42px rgba(96,63,30,.14); }
.s2-rv-quote { position: absolute; top: 16px; inset-inline-end: 16px; width: 26px; height: 26px; fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.6; opacity: .55; }
.s2-rv-text { margin: 0; color: var(--text); font-size: 13px; line-height: 2; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.s2-rv-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.s2-rv-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.s2-rv-av--txt { display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--line); color: var(--accent-strong); font-weight: 950; font-size: 16px; }
.s2-rv-foot strong { display: block; color: var(--text-strong); font-size: 13px; font-weight: 900; }
.s2-rv-foot small { color: var(--muted); font-size: 11px; }

/* ---------- لایت: کارت‌ها هم‌رنگ سیستم صفحه ---------- */
html[data-theme="light"] .seller2-page .s2-highlights article,
html[data-theme="light"] .seller2-page .s2-about__text,
html[data-theme="light"] .seller2-page .s2-rv-card {
  border-color: var(--page-card-border, var(--line));
  background: var(--page-card-bg, var(--surface-raised));
  box-shadow: var(--page-card-shadow, var(--shadow-card));
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 900px) {
  .s2-highlights { grid-template-columns: 1fr 1fr; }
  .s2-about { grid-template-columns: 1fr; }
  .s2-about__media { min-height: 220px; max-height: 220px; }
}
@media (max-width: 760px) {
  .s2-cover { height: auto; min-height: 260px; }
  .s2-cover__overlay { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; }
  .s2-avatar { width: 84px; height: 84px; border-radius: 22px; }
  .s2-avatar svg { width: 28px; height: 28px; }
  .s2-avatar strong { font-size: 18px; }
  .s2-cover__title h1 { font-size: 24px; }
  .s2-headline { justify-content: stretch; padding: 14px 18px; }
  .s2-cta { flex: 1; }
  .s2-cta .s2-follow { flex: 1; justify-content: center; }
  /* آماره‌ها: نوار افقی اسکرول‌شونده تا هیچ خانهٔ خالی نماند */
  .s2-stats { display: flex; overflow-x: auto; scrollbar-width: none; }
  .s2-stats::-webkit-scrollbar { display: none; }
  .s2-stat { flex: 1 0 30%; min-width: 100px; }
  .s2-prod-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .s2-prod-filters::-webkit-scrollbar { display: none; }
  .s2-prod-filters .chip { flex: 0 0 auto; }
  .s2-match { flex-direction: column; text-align: center; }
  .s2-match__btn { width: 100%; justify-content: center; }
  .s2-rv-card { flex-basis: 260px; }
}
@media (max-width: 520px) {
  .s2-facts { grid-template-columns: 1fr; }
  .s2-stat { flex: 1 0 40%; min-width: 92px; }
}
/* =========================================================================
   seller3.html — طرح ۳ پروفایل فروشنده: تب چسبان + سایدبار چسبان
   (بازاستفاده از کلاس‌های s2- برای هیرو/آمار/نظرات؛ فقط توکن‌ها)
   ========================================================================= */
.s3-main { padding-bottom: 40px; }
.s3-breadcrumb { margin: 16px auto 10px; }
.s3-hero .s2-cover { height: 350px; }
.s3-overlay { align-items: flex-end; }
.s3-title { flex: 1 1 auto; min-width: 0; }
.s3-cta { padding-bottom: 8px; }
.s3-msg {
  color: #fff; border-color: rgba(255,255,255,.4);
  background: rgba(20,16,12,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.s3-msg:hover { color: #fff; border-color: #fff; }

/* --- نوار تب چسبان --- */
.s3-tabs-wrap {
  position: sticky; top: 0; z-index: 40;
  margin-top: 18px; padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.s3-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.s3-tabs::-webkit-scrollbar { display: none; }
.s3-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; color: var(--muted); font-size: 13.5px; font-weight: 800;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.s3-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.s3-tab:hover { color: var(--text); }
.s3-tab.is-active {
  color: #1a120b;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 20px rgba(150,95,45,.22);
}

/* --- چیدمان دوستونه: سایدبار راست + محتوا --- */
.s3-layout { margin-top: 22px; display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 22px; align-items: start; }
.s3-side { position: sticky; top: 76px; display: grid; gap: 16px; }
.s3-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: var(--shadow-card);
  padding: 20px;
}
.s3-card__title { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: 15px; font-weight: 950; }
.s3-card__title svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; }

/* حلقهٔ امتیاز کافی‌مچ */
.s3-score {
  width: 118px; height: 118px; margin: 4px auto 10px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--muted) 18%, transparent) 0);
}
.s3-score::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface-raised); }
.s3-score b { position: relative; color: var(--text-strong); font-size: 25px; font-weight: 950; }
.s3-match__sub { margin: 0 0 12px; text-align: center; color: var(--muted); font-size: 12px; }
.s3-match__list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 9px; }
.s3-match__list li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.s3-match__list svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 2.2; }
.s3-facts { margin-bottom: 16px; grid-template-columns: 1fr; }
.s3-social { margin-top: 0; }
.s3-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.s3-trust li { display: flex; align-items: center; gap: 11px; }
.s3-trust strong { display: block; color: var(--text-strong); font-size: 13px; font-weight: 900; }
.s3-trust small { color: var(--muted); font-size: 11.5px; }

/* --- بخش‌های ستون اصلی --- */
.s3-sec { scroll-margin-top: 92px; }
.s3-sec + .s3-sec { margin-top: 30px; }
.s3-prod-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

/* داستان: بنر جمع‌وجور متن + تصویر هم‌قد */
.s3-story {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: var(--shadow-card);
}
.s3-story__text { padding: 24px; }
.s3-story__text h2 { margin: 0 0 10px; color: var(--text-strong); font-size: 19px; font-weight: 950; line-height: 1.55; }
.s3-story__text p { margin: 0; color: var(--muted); font-size: 13px; line-height: 2.1; }
.s3-story__media { min-height: 100%; }
.s3-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- لایت --- */
html[data-theme="light"] .seller3-page .s3-card,
html[data-theme="light"] .seller3-page .s3-story,
html[data-theme="light"] .seller3-page .s2-rv-card {
  border-color: var(--page-card-border, var(--line));
  background: var(--page-card-bg, var(--surface-raised));
  box-shadow: var(--page-card-shadow, var(--shadow-card));
}
html[data-theme="light"] .seller3-page .s3-score::before { background: var(--page-card-bg, var(--surface-raised)); }
html[data-theme="light"] .seller3-page .s3-tabs-wrap { background: color-mix(in srgb, var(--bg) 86%, transparent); }

/* --- ریسپانسیو --- */
@media (max-width: 980px) {
  .s3-layout { grid-template-columns: 1fr; }
  .s3-side { position: static; order: 2; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .s3-content { order: 1; }
  .s3-side .s3-match { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .s3-hero .s2-cover { height: auto; min-height: 280px; }
  .s3-overlay { flex-direction: column; align-items: flex-start; gap: 14px; }
  .s3-cta { width: 100%; padding-bottom: 0; }
  .s3-cta .s2-follow { flex: 1; justify-content: center; }
  .s3-tabs-wrap { top: 62px; }
  .s3-sec { scroll-margin-top: 150px; }
  .s3-side { grid-template-columns: 1fr; }
  .s3-story { grid-template-columns: 1fr; }
  .s3-story__media { max-height: 180px; }
}
/* =========================================================================
   seller2 — بازگشت هدر کلاسیک (لوگو کمی روی کاور، عنوان زیر آن روی کارت)
   scoped تا هیروی seller3 (نسخهٔ روی-کاور) دست‌نخورده بماند
   ========================================================================= */
.seller2-page .s2-cover { height: 260px; }
.seller2-page .s2-headline { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: flex-end; gap: 20px; padding: 0 26px 22px; }
.seller2-page .s2-avatar { width: 118px; height: 118px; border-radius: 26px; border: 3px solid var(--surface-raised); box-shadow: var(--shadow-card); transform: translateY(-46px); margin-bottom: -34px;overflow:hidden; }
.seller2-page .s2-avatar svg { width: 34px; height: 34px; }
.seller2-page .s2-avatar strong { font-size: 20px; }
.seller2-page .s2-headline__main { padding-bottom: 4px; }
.seller2-page .s2-headline__main h1 { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-strong); font-size: 26px; font-weight: 950; text-shadow: none; }
.seller2-page .s2-verified { color: #2e9463; background: color-mix(in srgb, #2fae6f 16%, transparent); border-color: color-mix(in srgb, #2fae6f 38%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .seller2-page .s2-verified { color: #8ce6b7; }
.seller2-page .s2-meta { color: var(--muted); text-shadow: none; }
.seller2-page .s2-dot { background: var(--muted-2); }
.seller2-page .s2-stars__base svg { fill: color-mix(in srgb, var(--muted) 42%, transparent); }
.seller2-page .s2-rating-inline strong { color: var(--text-strong); text-shadow: none; }
.seller2-page .s2-rating-inline small { color: var(--muted); text-shadow: none; }
.seller2-page .s2-cta { padding-bottom: 6px; }

/* --- نظرات: ستون امتیاز (راست) + اسلایدر نظرات (چپ) --- */
.s2-rv-layout { margin-top: 14px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.s2-rv-layout .s2-rv-shell { min-width: 0; margin-top: 0; }
.s2-rv-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: var(--shadow-card);
  padding: 20px 18px; display: grid; gap: 15px; align-content: start;
}
.s2-rv-panel .s2-rv-score { display: grid; justify-items: center; gap: 7px; text-align: center; }
.s2-rv-panel .s2-rv-avg { font-size: 40px; }
.s2-rv-panel .rv-bars { padding-top: 14px; border-top: 1px dashed var(--line); }
html[data-theme="light"] .seller2-page .s2-rv-panel,
html[data-theme="light"] .seller3-page .s2-rv-panel {
  border-color: var(--page-card-border, var(--line));
  background: var(--page-card-bg, var(--surface-raised));
  box-shadow: var(--page-card-shadow, var(--shadow-card));
}

@media (max-width: 760px) {
  .seller2-page .s2-cover { height: 190px; min-height: 0; }
  .seller2-page .s2-headline { grid-template-columns: 1fr; text-align: center; padding: 0 18px 18px; gap: 8px; }
  .seller2-page .s2-avatar { width: 96px; height: 96px; justify-self: center; transform: translateY(-46px); margin-bottom: -32px; }
  .seller2-page .s2-headline__main h1 { justify-content: center; font-size: 22px; }
  .seller2-page .s2-meta { justify-content: center; }
  .seller2-page .s2-cta { justify-content: center; padding-bottom: 0; }
  .s2-rv-layout { grid-template-columns: 1fr; }
}
/* ===== seller2 دسکتاپ: لوگو نیم‌روی کاور؛ فقط عنوان اصلی روی کاور روبه‌روی لوگو؛
   آدرس و ستاره‌ها زیر کاور داخل کادر با رنگ توکن (هماهنگ دارک/لایت) ===== */
@media (min-width: 761px) {
  .seller2-page .s2-hero { position: relative; }
  .seller2-page .s2-avatar { transform: translateY(-62px); margin-bottom: -46px; }
  /* فقط h1 روی کاور، روبه‌روی لوگو (عکس در هر دو تم یکی است → سفید + سایه همیشه خوانا) */
  .seller2-page .s2-headline__main h1 {
    position: absolute; top: 196px; inset-inline-start: 166px; z-index: 3; margin: 0;
    max-width: min(56%, 540px);
    color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.65);
  }
  .seller2-page .s2-headline__main h1 .s2-verified {
    color: #eafff3; background: rgba(38,150,95,.55); border-color: rgba(120,230,175,.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-shadow: none;
  }
  /* آدرس و ستاره‌ها زیر کاور داخل کادر (رنگ توکن پیش‌فرض seller2 حفظ می‌شود) */
  .seller2-page .s2-headline__main { padding-top: 8px; }
  .seller2-page .s2-meta { margin-bottom: 8px; }
}

/* ===== محصولات به‌صورت اسلایدر (دسکتاپ و موبایل) ===== */
.s2-prod-grid {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth; padding: 4px 2px 12px;
}
.s2-prod-grid::-webkit-scrollbar { display: none; }
.s2-prod-grid .shop-card { flex: 0 0 234px; scroll-snap-align: start; }
.s2-prod-grid .acc-b { flex: 0 0 390px; scroll-snap-align: start; }
.s2-prod-shell .slider-btn--right { right: -10px; }
.s2-prod-shell .slider-btn--left { left: -10px; }
@media (max-width: 760px) {
  .s2-prod-grid .shop-card { flex-basis: 208px; }
  .s2-prod-grid .acc-b { flex-basis: min(88vw, 340px); }
  .s2-prod-shell .slider-btn { display: none; } /* موبایل با سوایپ */
  .s2-prod-grid { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}

/* ===== اسلایدر نظرات: سایهٔ فشرده (کات نمی‌شود)، هم‌قدی با پنل امتیاز، رفع تداخل ستاره/نقل‌قول ===== */
.s2-rv-slider { padding: 6px 2px 14px; }
.s2-rv-slider .s2-rv-card { box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .45); }
html[data-theme="light"] .seller2-page .s2-rv-slider .s2-rv-card,
html[data-theme="light"] .seller3-page .s2-rv-slider .s2-rv-card { box-shadow: 0 10px 20px -14px rgba(96, 62, 33, .35); }
/* ستاره‌ها ltr هستند؛ در فلکس تمام‌عرض چپ‌چین می‌شدند و زیر آیکون نقل‌قول می‌رفتند */
.s2-rv-card > .s2-rvs { align-self: flex-start; }
/* پنل امتیاز با همان فاصله‌های بالا/پایین اسلایدر تا کف و سقف کارت‌ها یکی شود */
.s2-rv-layout .s2-rv-panel { margin: 6px 0 14px; }
.s2-rv-layout .s2-rv-shell { display: grid; }

/* ===================================================================
   v112 — دو دنیای فروشگاه (قهوه / اکسسوری) + کارت‌های اکسسوری A و B
   =================================================================== */

/* --- سوییچر دنیا --- */
.shop-worlds { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(420px, 100%); margin: 0 auto 20px; padding: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-pill); isolation: isolate; }
.shop-worlds__pill { position: absolute; z-index: -1; top: 6px; bottom: 6px; inset-inline-start: 6px; width: calc(50% - 9px); border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .35s var(--ease); }
.shop-worlds[data-active="accessory"] .shop-worlds__pill { transform: translateX(calc(-100% - 6px)); }
.shop-world { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 700; border-radius: var(--radius-pill); cursor: pointer; transition: color .3s; }
.shop-world svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-world.is-active { color: var(--bg); }
html[data-theme="light"] .shop-world.is-active { color: #fff; }
.shop-world:not(.is-active):hover { color: var(--accent-strong); }

/* --- چیدمان اکسسوری: بلوک‌های متناوب A/B --- */
.shop-grid.is-acc { display: flex; flex-direction: column; gap: 22px; }
.acc-grid-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.acc-grid-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* آیکون‌های اسپرایت داخل کارت‌های اکسسوری */
.acc-a svg, .acc-b svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.acc-a .rate svg, .acc-b .rate svg { fill: currentColor; stroke: none; }

/* --- کارت A: تِک‌کارت اسپک‌محور --- */
.acc-a { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.acc-a:hover, .acc-a.is-inview { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.acc-a__media { position: relative; margin: 12px 12px 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-muted); }
.acc-a__media a { display: block; height: 100%; }
.acc-a__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.acc-a:hover .acc-a__media img, .acc-a.is-inview .acc-a__media img { transform: scale(1.06); }
.acc-a__usd { position: absolute; z-index: 1; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--accent-strong); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-pill); }
.acc-a__fav { position: absolute; z-index: 1; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--bg) 65%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; transition: color .25s; }
.acc-a__fav svg { width: 16px; height: 16px; }
.acc-a__fav.is-active { color: var(--danger); }
.acc-a__fav.is-active svg { fill: currentColor; }
.acc-a__body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; flex: 1; }
.acc-a__brand { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.acc-a__brand .rate { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; }
.acc-a__brand .rate svg { width: 13px; height: 13px; }
.acc-a h3 { margin: 0; font-size: 15.5px; }
.acc-a h3 a { color: var(--text-strong); text-decoration: none; }
.acc-a__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; background: var(--glass); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--muted); }
.acc-a__specs b { color: var(--text); font-weight: 600; margin-inline-start: 4px; }
.acc-a__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.acc-a__price b { font-size: 18px; color: var(--text-strong); }
.acc-a__price small { color: var(--muted); font-size: 11px; margin-inline-start: 4px; }
.acc-a__price .ref { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.acc-a__add { display: inline-flex; align-items: center; gap: 7px; border: none; background: var(--accent); color: var(--bg); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: filter .25s, transform .25s; }
html[data-theme="light"] .acc-a__add { color: #fff; }
.acc-a__add svg { width: 15px; height: 15px; stroke-width: 1.9; }
.acc-a__add:hover { filter: brightness(1.08); transform: translateY(-1px); }
.acc-a__add.added { background: #7fb069; color: #fff; }

/* --- کارت B: افقی ابزارخانه --- */
.acc-b { position: relative; display: grid; grid-template-columns: 148px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.acc-b::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), transparent); }
.acc-b:hover, .acc-b.is-inview { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.acc-b__media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; background: var(--surface-muted); }
.acc-b__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.acc-b:hover .acc-b__media img, .acc-b.is-inview .acc-b__media img { transform: scale(1.07) rotate(-1deg); }
.acc-b__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-block: 2px; }
.acc-b__cat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; color: var(--accent-strong); background: var(--glass); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--radius-pill); }
.acc-b__cat svg { width: 14px; height: 14px; }
.acc-b__cat { text-decoration: none; max-width: 105px;
  max-height: 30px;
  overflow: hidden;
  display: block;}
.acc-b h3 { margin: 0; font-size: 15px; }
.acc-b h3 a { color: var(--text-strong); text-decoration: none; }
.acc-b__meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--muted); }
.acc-b__meta .rate { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; }
.acc-b__meta .rate svg { width: 13px; height: 13px; }
.acc-b__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-b__price b { font-size: 17px; color: var(--text-strong); }
.acc-b__price small { font-size: 11px; color: var(--muted); margin-inline-start: 4px; }
.acc-b__price .ref { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.acc-b__add { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: var(--accent-strong); border-radius: 50%; cursor: pointer; transition: background .25s, color .25s; }
.acc-b__add svg { width: 17px; height: 17px; }
.acc-b__add:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
html[data-theme="light"] .acc-b__add:hover { color: #fff; }
.acc-b__add.added { background: #7fb069; border-color: #7fb069; color: #fff; }
.acc-b__stock { position: absolute; top: 18px; inset-inline-end: 14px; font-size: 10.5px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 5px; }
.acc-b__stock i { width: 7px; height: 7px; border-radius: 50%; background: #7fb069; box-shadow: 0 0 8px #7fb06988; }
.acc-b__stock.is-unavailable i { background: #d36b61; box-shadow: 0 0 8px #d36b6188; }

/* --- ریسپانسیو اکسسوری --- */
@media (max-width: 900px) {
  .acc-grid-a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-grid-b { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .acc-grid-a { gap: 12px; }
  .acc-grid-b { gap: 12px; }
  .shop-grid.is-acc { gap: 14px; }
  .acc-a__media { margin: 8px 8px 0; }
  .acc-a__body { padding: 11px 12px 13px; gap: 8px; }
  .acc-a h3 { font-size: 13.5px; }
  .acc-a__specs { grid-template-columns: 1fr; gap: 5px; padding: 8px 10px; }
  .acc-a__specs span:nth-child(n+3) { display: none; }
  .acc-a__price b { font-size: 15.5px; }
  .acc-a__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .acc-a__add { padding: 9px 12px; font-size: 11.5px; justify-content: center; }
  .acc-b { grid-template-columns: 108px 1fr; gap: 10px; padding: 10px; }
  .acc-b h3 { font-size: 13.5px; }
  .shop-world { font-size: 13px; padding: 10px 8px; }
}

/* --- صفحهٔ محصول اکسسوری (product-acc.html) — بازاستفاده از قالب product + بلوک‌های ویژه --- */
.accpd .product-visual { display: flex; flex-direction: column; gap: 12px; }
.accpd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.accpd-thumbs button { padding: 0; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-muted); cursor: pointer; aspect-ratio: 4/3; transition: border-color .25s; }
.accpd-thumbs button.is-active { border-color: var(--accent); }
.accpd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accpd-brandrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.accpd-brandrow b { color: var(--accent-strong); }
.accpd-usd { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }
.accpd-usd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.accpd-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.accpd-badges span { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 11px; color: var(--muted); padding: 12px 8px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.accpd-badges svg { width: 21px; height: 21px; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.accpd-specs-card h2 { margin: 0 0 14px; font-size: 17px; color: var(--text-strong); }
.accpd-specs { width: 100%; border-collapse: collapse; font-size: 13px; }
.accpd-specs tr + tr { border-top: 1px dashed var(--line); }
.accpd-specs th { text-align: start; font-weight: 600; color: var(--muted); padding: 11px 0; width: 40%; }
.accpd-specs td { color: var(--text-strong); padding: 11px 0; }
.accpd-box-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.accpd-box-list li { display: flex; align-items: center; gap: 9px; }
.accpd-box-list svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 760px) {
  .accpd-badges { gap: 8px; }
  .accpd-thumbs { gap: 8px; }
}

/* ===================================================================
   v113 — اصلاح کادر باکس‌های product-acc + تایل ویدیو + طرح دوم (ap2)
   =================================================================== */

/* باکس‌های مشخصات/جعبه در صفحهٔ محصول اکسسوری: کادر مستقل (خارج از product-info-grid) */
.accpd .product-mini-card { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.accpd .accpd-specs-card h2 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.accpd .accpd-specs-card h2::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }

/* تایل ویدیو در نوار تصاویر (به‌جای بج روی عکس) */
.accpd-thumb-video { position: relative; padding: 0; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-muted); cursor: pointer; aspect-ratio: 4/3; transition: border-color .25s, transform .25s; }
.accpd-thumb-video:hover { border-color: var(--gold); transform: translateY(-2px); }
.accpd-thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.42) saturate(.85); }
.accpd-thumb-video__ov { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 3px; color: #fff; }
.accpd-thumb-video__ov svg { width: 30px; height: 30px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: linear-gradient(145deg, var(--gold), #c58a3e); fill: #241708; stroke: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.accpd-thumb-video__ov small { font-size: 10px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ---------------- طرح ۲: شوکِیس پرمیوم (product-acc-2.html) ---------------- */
.ap2-main { padding-bottom: 70px; }
.ap2-hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: 34px; align-items: start; margin-top: 8px; }

/* استیج محصول با هالهٔ نور */
.ap2-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--surface); padding: 26px 26px 20px; overflow: hidden; }
.ap2-stage::before { content: ""; position: absolute; inset: auto -20% -55% -20%; height: 70%; background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); pointer-events: none; }
.ap2-stage__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.1; box-shadow: var(--shadow-card); }
.ap2-stage__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap2-float { position: absolute; z-index: 2; top: 40px; inset-inline-end: 40px; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; pointer-events: none; }
.ap2-float span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-solid) 74%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); font-size: 11px; color: var(--muted); box-shadow: var(--shadow-card); }
.ap2-float span b { color: var(--accent-strong); font-size: 12px; }
.ap2-float .ap2-adtag {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, transparent), color-mix(in srgb, var(--accent-deep) 92%, transparent));
  color: #1a120b;
  border: 0;
  font-weight: 850;
}
.ap2-float .ap2-adtag b { color: #1a120b; }
.ap2-float .ap2-adtag svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.ap2-thumbs { margin-top: 14px; position: relative; z-index: 1; grid-template-columns: repeat(5, 1fr); }

/* ستون اطلاعات و خرید */
.ap2-info { display: flex; flex-direction: column; gap: 13px; padding-top: 6px; }
.ap2-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ap2-kicker .vbadge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent); color: var(--gold); font-size: 10.5px; font-weight: 800; }
.ap2-kicker .vbadge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.ap2-kicker b { color: var(--accent-strong); }
.ap2-info h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.35; color: var(--text-strong); }
.ap2-rating { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.ap2-rating strong { color: var(--gold); font-size: 15px; }
.ap2-lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }

.ap2-buy { margin-top: 6px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 15px; }
.ap2-price { display: flex; flex-direction: column; gap: 4px; }
.ap2-price strong { font-size: 26px; color: var(--text-strong); }
.ap2-buy__row { display: flex; align-items: center; gap: 12px; }
.ap2-buy__row .add-cart-btn { flex: 1; }
.ap2-trust { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px dashed var(--line); }
.ap2-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.8px; color: var(--muted); }
.ap2-trust svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-strong); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* تب‌های چسبان */
.ap2-tabs { position: sticky; top: 12px; z-index: 40; display: flex; gap: 4px; margin: 38px auto 26px; padding: 6px; width: max-content; max-width: 100%; overflow-x: auto; background: color-mix(in srgb, var(--surface-solid) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
.ap2-tabs a { padding: 9px 18px; border-radius: var(--radius-pill); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .25s, color .25s; }
.ap2-tabs a.is-active { background: var(--accent); color: var(--bg); }
html[data-theme="light"] .ap2-tabs a.is-active { color: #fff; }

/* سکشن‌ها */
.ap2-sec { margin-bottom: 26px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin-top: 90px; }
.ap2-sec > h2 { margin: 0 0 16px; font-size: 17px; color: var(--text-strong); display: flex; align-items: center; gap: 10px; }
.ap2-sec > h2 svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap2-sec .accpd-specs th { width: 30%; }
.ap2-related { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap2-related .market-product { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; }

/* بلوک ویدیوی سینمایی */
.ap2-cine { position: relative; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/8; background-size: cover; background-position: center; cursor: pointer; display: grid; place-items: center; isolation: isolate; }
.ap2-cine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 4, .25), rgba(8, 6, 4, .72)); z-index: 0; transition: background .3s; }
.ap2-cine:hover::before { background: linear-gradient(180deg, rgba(8, 6, 4, .15), rgba(8, 6, 4, .62)); }
.ap2-cine__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.ap2-cine__play { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(145deg, var(--gold), #c58a3e); color: #241708; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 255, 255, .12); transition: transform .3s var(--ease); }
.ap2-cine:hover .ap2-cine__play { transform: scale(1.09); }
.ap2-cine__play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.ap2-cine__inner b { font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ap2-cine__inner small { font-size: 11.5px; opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* نوار خرید چسبان موبایل */
.ap2-buybar { position: fixed; z-index: 75; inset-inline: 12px; bottom: 82px; display: none; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.ap2-buybar__price { display: flex; flex-direction: column; }
.ap2-buybar__price strong { font-size: 15.5px; color: var(--text-strong); }
.ap2-buybar__price small { font-size: 10px; color: var(--muted-2); }
.ap2-buybar .add-cart-btn { flex: 1; padding-block: 11px; font-size: 13px; }

/* ریسپانسیو طرح ۲ */
@media (max-width: 900px) {
  .ap2-hero { grid-template-columns: 1fr; gap: 22px; }
  .ap2-related { grid-template-columns: 1fr; }
  .ap2-cine { aspect-ratio: 16/9; }
}
@media (max-width: 760px) {
  .ap2-buybar { display: flex; }
  .ap2-hero .ap2-buy { display: none; }
  .ap2-stage { padding: 14px 14px 12px; }
  .ap2-float { top: 24px; inset-inline-end: 24px; }
  .ap2-tabs { top: 8px; margin: 26px auto 18px; }
  .ap2-sec { padding: 18px 16px; }
  .accpd .product-mini-card { padding: 18px 16px; }
}

/* ===================================================================
   v114 — بازطراحی product-acc-2: هم‌رنگی با کارت نظرات، چیدمان دوستونه،
   نمایش بیشتر، فروشنده، USP و بنر تبلیغی
   =================================================================== */

/* پس‌زمینهٔ سکشن‌ها = همان کارت نظرات (surface-raised + سایهٔ کارت) */
.ap2-sec, .ap2-buy, .ap2-stage, .ap2-usp, .ap2-seller {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html[data-theme="dark"] .ap2-sec,
html[data-theme="dark"] .ap2-buy,
html[data-theme="dark"] .ap2-stage,
html[data-theme="dark"] .ap2-usp,
html[data-theme="dark"] .ap2-seller {
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html[data-theme="light"] body.app-page:not(.home-page) .ap2-sec,
html[data-theme="light"] body.app-page:not(.home-page) .ap2-buy,
html[data-theme="light"] body.app-page:not(.home-page) .ap2-stage,
html[data-theme="light"] body.app-page:not(.home-page) .ap2-usp,
html[data-theme="light"] body.app-page:not(.home-page) .ap2-seller {
  border-color: var(--page-card-border);
  background: var(--page-card-bg);
  box-shadow: var(--page-card-shadow);
}
html[data-theme="light"] body.app-page:not(.home-page) .ap2-stage {
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), var(--page-card-bg);
}
html[data-theme="dark"] .ap2-stage {
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--surface-raised);
}

/* چیدمان فشرده‌تر */
.ap2-hero { gap: 24px; }
.ap2-sec { margin-bottom: 16px; padding: 22px 24px; }
.ap2-tabs { margin: 26px auto 18px; }
.ap2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 16px; align-items: start; }
.ap2-colmain { min-width: 0; }
.ap2-colmain .product-reviews-section { margin-bottom: 0; }
.ap2-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }

/* نوار مزیت‌ها (USP) */
.ap2-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; padding: 16px 14px; border-radius: var(--radius-lg); }
.ap2-usp > span { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 6px 4px; }
.ap2-usp i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); margin-bottom: 3px; }
.ap2-usp svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-strong); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap2-usp b { font-size: 12px; color: var(--text-strong); }
.ap2-usp small { font-size: 10px; color: var(--muted-2); }

/* نمایش بیشتر / کمتر */
.ap2-clamp { position: relative; overflow: hidden; max-height: var(--clamp, 240px); }
.ap2-clamp::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 76px; background: linear-gradient(180deg, transparent, var(--surface-raised)); pointer-events: none; transition: opacity .3s; }
html[data-theme="light"] body.app-page:not(.home-page) .ap2-clamp::after { background: linear-gradient(180deg, transparent, #fffaf7); }
.ap2-clamp.is-open { max-height: none; }
.ap2-clamp.is-open::after { opacity: 0; }
.ap2-more { display: flex; align-items: center; gap: 7px; margin: 12px auto 0; border: 1px solid var(--line-strong); background: transparent; color: var(--accent-strong); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 24px; border-radius: var(--radius-pill); cursor: pointer; transition: background .25s, color .25s; }
.ap2-more:hover { background: var(--glass); }
.ap2-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.ap2-more.is-open svg { transform: rotate(180deg); }

/* توضیحات بیشتر */
.ap2-desc p { margin: 0 0 12px; /*color: var(--muted);*/ font-size: 13.5px; line-height: 2.1; }
.ap2-desc p b { color: var(--text-strong); }
.ap2-desc__sub { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; font-size: 14.5px; color: var(--text-strong); }
.ap2-desc__sub svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap2-sec .ap2-cine { margin: 6px 0 16px; aspect-ratio: 21/8; }

/* کارت فروشنده */
.ap2-seller { border-radius: var(--radius-lg); overflow: hidden; }
.ap2-seller__cover { height: 78px; overflow: hidden; }
.ap2-seller__cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.ap2-seller__head { display: flex; align-items: center; gap: 11px; padding: 0 16px; margin-top: -20px; position: relative; }
.ap2-seller__logo { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--line-strong); color: var(--accent-strong); font-family: Georgia, serif; font-size: 21px; box-shadow: var(--shadow-card); }
.ap2-seller__head > div { display: grid; gap: 2px; padding-top: 18px; }
.ap2-seller__head b { color: var(--text-strong); font-size: 14.5px; }
.ap2-seller__head small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10.8px; }
.ap2-seller__head small svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ap2-seller__tick { color: #7fb069; }
.ap2-seller__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 13px 16px 0; }
.ap2-seller__stats span { display: grid; justify-items: center; gap: 2px; padding: 9px 4px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ap2-seller__stats b { color: var(--text-strong); font-size: 13.5px; }
.ap2-seller__stats small { color: var(--muted-2); font-size: 9.8px; }
.ap2-seller__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px 16px 16px; }
.ap2-seller__cta .outline-btn { text-align: center; font-size: 12px; padding: 10px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ap2-seller__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* بنر تبلیغی */
.ap2-promo { position: relative; display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; text-decoration: none; overflow: hidden; box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-deep) 35%, transparent); }
.ap2-promo::after { content: ""; position: absolute; inset-block: -40%; inset-inline-end: -12%; width: 46%; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent); pointer-events: none; }
.ap2-promo__spark { width: 22px; height: 22px; fill: none; stroke: #1a120b; stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.ap2-promo b { font-size: 15px; font-weight: 900; }
.ap2-promo small { font-size: 11px; opacity: .78; }
.ap2-promo__code { justify-self: start; margin-top: 7px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1.5px dashed rgba(26, 18, 11, .55); font-weight: 900; font-size: 13px; letter-spacing: .08em; background: rgba(255, 255, 255, .22); }
html[data-theme="light"] .ap2-promo { color: #fff; }
html[data-theme="light"] .ap2-promo__spark { stroke: #fff; }
html[data-theme="light"] .ap2-promo__code { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .14); }

/* پیشنهادی‌ها: ۳ کارت مجزا */
.ap2-relwrap { margin-top: 26px; }
.ap2-relhead { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; color: var(--text-strong); }
.ap2-relhead svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap2-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ap2-related .acc-a__add { text-decoration: none; }

/* ریسپانسیو */
@media (max-width: 900px) {
  .ap2-cols { grid-template-columns: 1fr; }
  .ap2-side { position: static; }
  .ap2-usp { grid-template-columns: repeat(2, 1fr); gap: 12px 6px; }
  .ap2-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ap2-sec { padding: 18px 16px; }
  .ap2-related { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ap2-sec .ap2-cine { aspect-ratio: 16/9; }
  .ap2-usp b { font-size: 11px; }
}

/* v115 — product-acc-2 marketplace offers + tighter buying surface */
.ap2-main { padding-bottom: 52px; }
.ap2-hero { gap: 18px; }
.ap2-info { gap: 10px; }
.ap2-stage { padding: 20px 20px 16px; }
.ap2-stage__frame { aspect-ratio: 4 / 2.9; }
.ap2-buy { gap: 12px; padding: 16px 18px; }
.ap2-price strong { font-size: 23px; }
.ap2-lead { font-size: 13.5px; line-height: 1.9; }

.ap2-gallery-note {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-solid) 58%, transparent);
}
.ap2-gallery-note > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-strong);
}
.ap2-gallery-note svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap2-gallery-note div { display: grid; gap: 3px; min-width: 0; }
.ap2-gallery-note b { color: var(--text-strong); font-size: 13px; }
.ap2-gallery-note small { color: var(--muted); font-size: 11px; line-height: 1.75; }
.ap2-gallery-note a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-strong);
  border: 1px solid var(--line-strong);
  background: var(--glass);
}
.ap2-gallery-note a svg { width: 15px; height: 15px; }

.ap2-offers {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--glass) 72%, transparent);
}
.ap2-offers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 2px;
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 850;
}
.ap2-offers__head span,
.ap2-offer__body small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ap2-offers__head svg,
.ap2-offer__body svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap2-offers__head small { color: var(--muted-2); font-size: 11px; font-weight: 600; }
.ap2-offers__list { display: grid; gap: 7px; }
.ap2-offer {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-solid) 62%, transparent);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.ap2-offer:disabled, .ap2-offer.is-disabled { cursor: not-allowed; opacity: .58; }
.ap2-offer:hover,
.ap2-offer.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid));
}
.ap2-offer.is-active { transform: translateY(-1px); }
.ap2-offer__logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-deep) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-strong);
  font-weight: 950;
  overflow: hidden;
}
.ap2-offer__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ap2-offer__body { display: grid; gap: 4px; min-width: 0; }
.ap2-offer__body b {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 12.5px;
}
.ap2-offer__body em {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: var(--gold);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 850;
}
.ap2-offer__body small {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap2-offer__meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}
.ap2-offer__meta strong { color: var(--text-strong); font-size: 13.5px; }
.ap2-offer__meta small { color: var(--muted-2); font-size: 10px; }
.ap2-offer__meta i { color: #7fb069; font-size: 10px; font-style: normal; font-weight: 800; }
.ap2-buy__optionscolor { display: grid; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.ap2-buy__optionscolor[hidden] { display: none; }
.ap2-buy__optionscolor > span { color: var(--text-strong); font-size: 12px; font-weight: 800; }
.ap2-buy__optionscolor > div { display: flex; flex-wrap: wrap; gap: 7px; }
.ap2-buy__optionscolor button, .ap2-buy__optionscolor a { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-solid); color: var(--text); font: inherit; font-size: 11.5px; line-height: 20px; text-decoration: none; cursor: pointer; }
.ap2-buy__optionscolor button:hover, .ap2-buy__optionscolor button.is-active, .ap2-buy__optionscolor a:hover, .ap2-buy__optionscolor a.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface-solid)); color: var(--accent-strong); font-weight: 800; }

.ap2-seller__deal {
  margin: 12px 16px 0;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--glass);
}
.ap2-seller__deal span { color: var(--muted-2); font-size: 10.5px; }
.ap2-seller__deal b { color: var(--text-strong); font-size: 16px; }
.ap2-seller__deal small { color: var(--muted); font-size: 11px; line-height: 1.7; }

html[data-theme="light"] body.app-page:not(.home-page) .ap2-offers,
html[data-theme="light"] body.app-page:not(.home-page) .ap2-offer {
  background: rgba(255, 255, 255, .64);
}

@media (max-width: 900px) {
  .ap2-hero { gap: 16px; }
  .ap2-side { gap: 12px; }
}
@media (max-width: 760px) {
  .ap2-hero .ap2-buy { display: flex; }
  .ap2-buy { padding: 14px; }
  .ap2-buy__row { /*display: none;*/ }
  .ap2-trust { display: grid; grid-template-columns: 1fr; align-items: start; gap: 7px; }
}
@media (max-width: 560px) {
  .ap2-stage { padding: 12px; }
  .ap2-gallery-note {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 11px;
    gap: 10px;
  }
  .ap2-gallery-note > span { width: 38px; height: 38px; border-radius: 12px; }
  .ap2-gallery-note a { display: none; }
  .ap2-offer { grid-template-columns: 34px minmax(0, 1fr); }
  .ap2-offer__logo { width: 34px; height: 34px; border-radius: 11px; }
  .ap2-offer__meta {
    grid-column: 2;
    justify-items: start;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 7px;
  }
  .ap2-offer__body b { flex-wrap: wrap; }
  .ap2-offer__body small { white-space: normal; line-height: 1.7; }
}

/* v127 — finer mobile density, seller logos, soft review borders */
.ap2 #ap2-reviews .rv-card {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--line) 70%, transparent) 42%, transparent 78%) border-box;
  border: 1px solid transparent;
}
html[data-theme="light"] body.app-page:not(.home-page) .ap2 #ap2-reviews .rv-card {
  background:
    linear-gradient(var(--page-card-bg), var(--page-card-bg)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--page-card-border) 80%, transparent) 44%, transparent 78%) border-box;
}
.ap2 #ap2-reviews .rv-card::before {
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-deep), transparent);
}
.ap2 #ap2-reviews .rv-list::after {
  position: relative;
  padding-top: 74px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23d8b386' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M5 8h11v4.5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5V8Z'/%3E%3Cpath d='M16 10h2a2.2 2.2 0 1 1 0 4.4h-2'/%3E%3Cpath d='M4 20h15'/%3E%3Cpath d='M8 5h6'/%3E%3Cpath d='M7.5 15.5c2.2-2.2 4.4-3.5 7-4.4'/%3E%3C/svg%3E") top 14px right 16px / 58px 58px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 54%),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 32%),
    var(--glass);
}

@media (max-width: 760px) {
  .ap2-buy .ap2-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ap2-buy .ap2-usp > span {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 6px 5px;
  }
  .ap2-buy .ap2-usp i {
    width: 26px;
    height: 26px;
    border-radius: 9px;
  }
  .ap2-buy .ap2-usp b { font-size: 10.2px; }
  .ap2-buy .ap2-usp small { font-size: 8.7px; }

  .ap2-best-offer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 9px;
  }
  .ap2-best-offer__tag {
    align-self: start;
    padding-inline: 8px;
  }
  .ap2-best-offer__body {
    grid-column: 2;
  }
  .ap2-best-offer__body small {
    white-space: nowrap;
  }
  .ap2-best-offer a {
    grid-column: 1 / -1;
    justify-self: start;
    margin-inline-start: 2px;
  }
}

/* v124 — product-acc.html as coffee product page */
.coffee-acc-main { padding-bottom: 36px; }
.coffee-acc-breadcrumb { padding-bottom: 6px; }
.coffee-acc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr);
  gap: 18px;
  align-items: stretch;
}
.coffee-acc-stage {
  min-height: 100%;
}
.coffee-acc-stage .ap2-stage__frame {
  aspect-ratio: 4 / 2.9;
}
.coffee-buy-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 58% at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    var(--surface-raised);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .56);
}
html[data-theme="dark"] .coffee-buy-panel {
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html[data-theme="light"] body.app-page:not(.home-page) .coffee-buy-panel {
  border-color: var(--page-card-border);
  background:
    radial-gradient(90% 58% at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    var(--page-card-bg);
  box-shadow: var(--page-card-shadow);
}
.coffee-buy-panel__fav {
  top: 18px;
  left: 18px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
}
.coffee-buy-panel__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 48px);
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.coffee-buy-panel__kicker svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.8;
}
.coffee-buy-panel__kicker b { color: var(--accent-strong); }
.coffee-buy-panel h1 {
  margin: 0;
  padding-inline-end: 2px;
  color: var(--text-strong);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  font-weight: 950;
}
.coffee-buy-panel .product-subtitle { font-size: 12.5px; }
.coffee-buy-panel__rating .mini-stars svg,
.coffee-buy-panel__rating svg {
  width: 14px;
  height: 14px;
}
.coffee-price-box {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-solid));
}
.coffee-price-box span,
.coffee-price-box small {
  color: var(--muted);
  font-size: 10.5px;
}
.coffee-price-box strong {
  color: var(--text-strong);
  font-size: 24px;
  line-height: 1.35;
}
.coffee-buy-panel__actions {
  margin-block-start: 2px;
}
.coffee-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.coffee-detail-grid.product-info-grid > * {
  min-height: 114px;
}
.coffee-desc-card {
  position: relative;
  overflow: hidden;
}
.coffee-desc-card::before {
  content: "";
  position: absolute;
  inset-block: 18px auto;
  inset-inline-end: 18px;
  width: 86px;
  height: 86px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23d8b386' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M6.6 18.6c-3.1-3.1-2.7-8.5.9-12.1s9-4 12.1-.9c-.1 3.6-1.6 7.6-4.4 10.4-2.8 2.8-6.8 4.3-10.4 4.4'/%3E%3Cpath d='M6.8 18.4c1.8-4.9 4.3-8.4 8.9-10.5'/%3E%3Cpath d='M4 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .48;
  pointer-events: none;
}
.coffee-desc-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.coffee-desc-card__head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-strong);
}
.coffee-desc-card__head svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.coffee-desc-card__head h2 {
  margin: 0 0 2px;
  color: var(--text-strong);
  font-size: 15px;
}
.coffee-desc-card__head small {
  color: var(--muted);
  font-size: 11px;
}
.coffee-desc-card__body {
  position: relative;
  z-index: 1;
  max-height: 4.25em;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 2.1;
}
.coffee-desc-card__body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--surface));
}
html[data-theme="light"] body.app-page:not(.home-page) .coffee-desc-card__body::after {
  background: linear-gradient(180deg, transparent, var(--page-card-bg));
}
.coffee-desc-card__body.is-open {
  max-height: none;
}
.coffee-desc-card__body.is-open::after {
  opacity: 0;
}
.coffee-desc-card__body p {
  margin: 0;
  max-width: 82%;
}
.coffee-desc-card__body p + p {
  margin-top: 8px;
}
.coffee-desc-card__body b { color: var(--text-strong); }
.coffee-desc-card__more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 18px;
  cursor: pointer;
}
.coffee-desc-card__more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  transition: transform .25s var(--ease);
}
.coffee-desc-card__more.is-open svg { transform: rotate(180deg); }

.product-details-card { margin-top: 14px; }
.product-details-table-wrap { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.product-details-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.product-details-table th,
.product-details-table td { padding: 12px 15px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.product-details-table tr:last-child th,
.product-details-table tr:last-child td { border-bottom: 0; }
.product-details-table th { width: 34%; color: var(--text-strong); background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight: 800; }
.product-details-table td { color: var(--muted); }
.product-details-table-wrap:not(.is-open) tr:nth-child(n+7) { display: none; }

@media (max-width: 980px) {
  .coffee-acc-hero {
    grid-template-columns: 1fr;
  }
  .coffee-acc-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .coffee-acc-main { padding-bottom: 24px; }
  .coffee-buy-panel { padding: 16px; border-radius: 18px; }
  .coffee-buy-panel__actions {
    grid-template-columns: 106px 1fr;
  }
  .coffee-detail-grid {
    grid-template-columns: 1fr;
  }
  .coffee-desc-card__body p {
    max-width: none;
  }
  .coffee-desc-card::before {
    width: 64px;
    height: 64px;
    opacity: .34;
  }
  .product-details-table th { width: 42%; }
}
@media (max-width: 480px) {
  .coffee-acc-hero { gap: 12px; }
  .coffee-buy-panel__actions {
    grid-template-columns: 1fr;
  }
}

/* v117 — stable hero height: best offer up top, seller list lower */
.ap2-gallery-note { display: none; }
.ap2-hero { align-items: stretch; }
.ap2-stage { display: flex; flex-direction: column; }
.ap2-thumbs { margin-top: auto; padding-top: 14px; }
.ap2-buy { padding: 15px 16px; }
.ap2-best-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-solid));
}
.ap2-best-offer__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}
.ap2-best-offer__tag svg,
.ap2-best-offer a svg,
.ap2-best-offer__body svg,
.ap2-offers-panel__head svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap2-best-offer__body { display: grid; gap: 3px; min-width: 0; }
.ap2-best-offer__body b { color: var(--text-strong); font-size: 12.8px; }
.ap2-best-offer__body small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 10.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap2-best-offer a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.ap2-usp {
  width: min(100%, 680px);
  margin: 12px 0 0 auto;
  padding: 8px 10px;
  gap: 4px;
  border-radius: var(--radius-md);
}
.ap2-usp > span {
  grid-template-columns: 28px minmax(0, 1fr);
  justify-items: start;
  text-align: right;
  align-items: center;
  gap: 1px 7px;
  padding: 4px 6px;
}
.ap2-usp i {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  margin: 0;
}
.ap2-usp svg { width: 15px; height: 15px; }
.ap2-usp b { font-size: 10.8px; line-height: 1.45; }
.ap2-usp small { font-size: 9.2px; line-height: 1.45; }

.ap2-offers-panel {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.ap2-offers-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ap2-offers-panel__head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-strong);
  font-size: 15.5px;
}
.ap2-offers-panel__head small { color: var(--muted); font-size: 11px; }
.ap2-offers-panel .ap2-offers__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ap2-offers-panel .ap2-offer {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}
.ap2-offers-panel .ap2-offer__meta {
  grid-column: 1 / -1;
  justify-items: stretch;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.ap2-offers-panel .ap2-offer__meta strong { justify-self: start; }
.ap2-offers-panel .ap2-offer__meta small,
.ap2-offers-panel .ap2-offer__meta i { justify-self: end; }

.ap2-related .acc-a { min-height: 100%; }
.ap2-related .acc-a__specs { min-height: 68px; }
.ap2-related .acc-a__media { aspect-ratio: 4 / 3; }

.ap2 .product-reviews-section {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ap2 #ap2-reviews .rv-body {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: stretch;
}
.ap2 #ap2-reviews .rv-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.ap2 #ap2-reviews .rv-card {
  min-height: 188px;
  grid-template-rows: auto 1fr;
}
.ap2 #ap2-reviews .rv-card__top {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
}
.ap2 #ap2-reviews .rv-card__top .stars { grid-column: 1 / -1; }
.ap2 #ap2-reviews .rv-card p { font-size: 12px; line-height: 2; }

html[data-theme="light"] body.app-page:not(.home-page) .ap2-offers-panel,
html[data-theme="light"] body.app-page:not(.home-page) .ap2 .product-reviews-section {
  border-color: var(--page-card-border);
  background: var(--page-card-bg);
  box-shadow: var(--page-card-shadow);
}

@media (max-width: 900px) {
  .ap2-offers-panel .ap2-offers__list { grid-template-columns: 1fr; }
  .ap2 #ap2-reviews .rv-body { grid-template-columns: 1fr;        display: block; }
}
@media (max-width: 760px) {
  .ap2-usp {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .ap2-best-offer {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ap2-best-offer a { justify-self: start; }
}
@media (max-width: 560px) {
  .ap2 #ap2-reviews .rv-list { grid-template-columns: 1fr; }
  .ap2-related { grid-template-columns: 1fr; }
}

/* v118 — move trust USP into buy column + seller card with image logo */
@media (min-width: 901px) {
  .ap2-hero { align-items: stretch; }
  .ap2-info { height: 100%; }
  .ap2-buy {
    /*flex: 1;*/
    justify-content: space-between;
    min-height: 0;
  }
}
.ap2-buy .ap2-usp {
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}
.ap2-buy .ap2-usp > span {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
}
.ap2-buy .ap2-usp i {
  width: 30px;
  height: 30px;
}
.ap2-buy .ap2-usp b { font-size: 11.2px; }
.ap2-buy .ap2-usp small { font-size: 9.6px; }

.ap2-seller {
  overflow: hidden;
  padding-bottom: 16px;
}
.ap2-seller__cover {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.ap2-seller__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 6, .12), rgba(8, 7, 6, .42));
  pointer-events: none;
}
.ap2-seller__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95) contrast(.96);
}
.ap2-seller__pill {
  position: absolute;
  z-index: 2;
  top: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.ap2-seller__pill svg,
.ap2-seller__verified svg,
.ap2-seller__meta svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap2-seller__brand {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0 18px 12px;
  margin-top: -43px;
  position: relative;
  z-index: 3;
}
.ap2-seller__logo {
  width: 92px;
  height: 92px;
  display: block;
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface-solid);
  border: 4px solid var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.ap2-seller__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ap2-seller__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #2fae6f 14%, transparent);
  color: #2e9463;
  border: 1px solid color-mix(in srgb, #2fae6f 30%, transparent);
  font-size: 11px;
  font-weight: 850;
}
html[data-theme="dark"] .ap2-seller__verified { color: #8ce6b7; }
.ap2-seller__brand h2 {
  margin: 9px 0 8px;
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.4;
}
.ap2-seller__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 11px;
  color: var(--muted);
  font-size: 11px;
}
.ap2-seller__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ap2-seller__rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.ap2-seller__rating b {
  color: var(--text-strong);
  font-size: 14px;
}
.ap2-seller__rating span {
  display: inline-flex;
  gap: 1px;
  color: var(--gold);
}
.ap2-seller__rating svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
.ap2-seller__head { display: none; }
.ap2-seller__stats { padding-top: 2px; }
.ap2-seller__deal { margin-top: 10px; }
.ap2-seller__cta { padding-bottom: 0; }

@media (max-width: 760px) {
  .ap2-buy .ap2-usp { grid-template-columns: 1fr; }
  .ap2-seller__cover { height: 132px; }
  .ap2-seller__logo {
    width: 82px;
    height: 82px;
    border-radius: 23px;
  }
  .ap2-seller__brand h2 { font-size: 18px; }
}

/* v119 — on-page reviews only; modal keeps the shared default style */
.ap2 #ap2-reviews .rv-body {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
}
.ap2 #ap2-reviews .rv-summary {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.ap2 #ap2-reviews .rv-summary::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  inset-inline-end: -48px;
  bottom: -54px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.ap2 #ap2-reviews .rv-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ap2 #ap2-reviews .rv-card {
  position: relative;
  min-height: 214px;
  padding: 15px;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
}
.ap2 #ap2-reviews .rv-card::before {
  content: "";
  position: absolute;
  inset-inline: 16px;
  top: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}
.ap2 #ap2-reviews .rv-card::after {
  content: "\201D";
  position: absolute;
  inset-inline-end: 14px;
  bottom: -22px;
  z-index: -1;
  color: color-mix(in srgb, var(--accent) 16%, transparent);
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 1;
}
.ap2 #ap2-reviews .rv-card__top {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
}
.ap2 #ap2-reviews .rv-av {
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.ap2 #ap2-reviews .rv-card__top .rating-stars {
  justify-self: start;
  padding: 6px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
  --star: 18px !important;
}
.ap2 #ap2-reviews .rv-card__top .rating-star {
  width: 18px !important;
  height: 18px !important;
}
.ap2 #ap2-reviews .rv-card p {
  color: var(--text);
  font-size: 12.2px;
  line-height: 2.05;
}
.ap2 #ap2-reviews .rv-list::after {

}

@media (max-width: 980px) {
  .ap2 #ap2-reviews .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ap2 #ap2-reviews .rv-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ap2 #ap2-reviews .rv-list { grid-template-columns: 1fr; }
  .ap2 #ap2-reviews .rv-list::after { min-height: 140px; }
}

/* v127 final cascade guard */
.ap2 #ap2-reviews .rv-card {
  min-width: 257px;
  border-color: transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--line) 70%, transparent) 42%, transparent 78%) border-box;
  border: 1px solid transparent;
}
html[data-theme="light"] body.app-page:not(.home-page) .ap2 #ap2-reviews .rv-card {
  background:
    linear-gradient(var(--page-card-bg), var(--page-card-bg)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--page-card-border) 80%, transparent) 44%, transparent 78%) border-box;
}
.ap2 #ap2-reviews .rv-card::before {
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-deep), transparent);
}
.ap2 #ap2-reviews .rv-list::after {
  padding-top: 74px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23d8b386' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M5 8h11v4.5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5V8Z'/%3E%3Cpath d='M16 10h2a2.2 2.2 0 1 1 0 4.4h-2'/%3E%3Cpath d='M4 20h15'/%3E%3Cpath d='M8 5h6'/%3E%3Cpath d='M7.5 15.5c2.2-2.2 4.4-3.5 7-4.4'/%3E%3C/svg%3E") top 14px right 16px / 58px 58px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 54%),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 32%),
    var(--glass);
}

@media (max-width: 760px) {
  .ap2-buy .ap2-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ap2-buy .ap2-usp > span {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 6px 5px;
  }
  .ap2-buy .ap2-usp i {
    width: 26px;
    height: 26px;
    border-radius: 9px;
  }
  .ap2-buy .ap2-usp b { font-size: 10.2px; }
  .ap2-buy .ap2-usp small { font-size: 8.7px; }
  .ap2-best-offer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 9px;
  }
  .ap2-best-offer__body { grid-column: 2; }
  .ap2-best-offer__body small { white-space: nowrap; }
  .ap2-best-offer a {
    grid-column: 1 / -1;
    justify-self: start;
    margin-inline-start: 2px;
  }
}

/* ===================================================================
   v125 — product-acc (صفحه قهوه): واریانت‌های جمع‌وجور، حذف فضای خالی
   استیج تصویر و جداسازی سه کارت جزئیات از کادر یکپارچه
   =================================================================== */

/* 1) استیج تصویر: قاب عکس کل ارتفاع باقی‌مانده را پر می‌کند تا فضای
   خالی بین عکس بزرگ و بندانگشتی‌ها از بین برود و هم‌قد پنل خرید شود */
.coffee-acc-stage .ap2-stage__frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 300px;
}
.coffee-acc-stage .ap2-thumbs { margin-top: 14px; }

/* 2) واریانت‌ها: یک کادر واحد با ردیف‌های فشرده و مقدار انتخابی */
.coffee-variants {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-solid) 64%, transparent);
  overflow: hidden;
}
.coffee-variant {
  display: grid;
  gap: 8px;
  padding: 11px 13px;
}
.coffee-variant + .coffee-variant { border-top: 1px dashed var(--line); }
.coffee-variant__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coffee-variant__icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-strong);
}
.coffee-variant__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.coffee-variant__head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
}
.coffee-variant__value {
  margin-inline-start: auto;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
  font-size: 10.5px;
  font-weight: 850;
}
.coffee-variant__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.coffee-variant__opts button,
.coffee-variant__opts a {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 10.8px;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.coffee-variant__opts button:hover,
.coffee-variant__opts a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.coffee-variant__opts button.is-selected,
.coffee-variant__opts a.is-selected {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #1a120b;
}
html[data-theme="light"] .coffee-variant__opts button.is-selected,
html[data-theme="light"] .coffee-variant__opts a.is-selected { color: #fff; }

/* 3) سکشن جزئیات: فاصله از هیرو + سه کارت مستقل به‌جای کادر یکپارچه */
.coffee-acc-layout { margin-block-start: 18px; }
.coffee-detail-grid.product-info-grid {
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-theme="dark"] .coffee-detail-grid.product-info-grid { box-shadow: none; }
/* خنثی‌سازی خط‌های جداکنندهٔ داخلی product-info-grid (در ریسپانسیو !important دارند) */
.coffee-detail-grid.product-info-grid > * {
  border-inline-start: 1px solid var(--line) !important;
  border-block-start: 1px solid var(--line) !important;
}
html[data-theme="light"] body.app-page:not(.home-page) .coffee-detail-grid.product-info-grid > * {
  border-inline-start-color: var(--page-card-border) !important;
  border-block-start-color: var(--page-card-border) !important;
}

@media (max-width: 980px) {
  /* در حالت تک‌ستونه قاب عکس دوباره نسبت ثابت می‌گیرد */
  .coffee-acc-stage .ap2-stage__frame {
    flex: none;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}
@media (max-width: 480px) {
  .coffee-variant { padding: 10px 11px; }
  .coffee-variant__opts button,
  .coffee-variant__opts a { flex: 1 1 calc(33% - 6px); padding: 5px 8px; }
}

/* ===================================================================
   v126 — بلوک اکسسوری صفحهٔ اصلی: گرید سه‌ستونهٔ کارت افقی acc-b
   =================================================================== */
.home-acc-panel { margin-top: 22px; }
.acc-grid-b--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* روی صفحهٔ اصلی، acc-b از سطح کارت‌های خانه استفاده کند تا هماهنگ بماند */
.home-page .acc-b { background: var(--surface-raised); }
html[data-theme="dark"] .home-page .acc-b { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
@media (max-width: 900px) {
  .acc-grid-b--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .acc-grid-b--home { grid-template-columns: 1fr; }
}

/* ================= موقعیت شهر + مودال انتخاب موقعیت (فقط صفحهٔ اصلی) v127 ================= */
/* حالت خالیِ باکس «برشته‌کارهای شهر شما» */
.nearby-change { display: inline-flex; align-items: center; gap: 5px; }
.nearby-change svg { width: 14px; height: 14px; }
.nearby-note { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 9px 13px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.nearby-note svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.nearby-empty { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--glass); }
.nearby-empty__ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.nearby-empty__ic svg { width: 26px; height: 26px; }
.nearby-empty__txt { flex: 1; min-width: 210px; }
.nearby-empty__txt h3 { margin: 0 0 4px; font-size: 16px; color: var(--text-strong); }
.nearby-empty__txt p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.nearby-empty__btn { width: auto; flex: none; padding: 12px 22px; }

/* مودال انتخاب موقعیت — نوار جستجوی شناور روی نقشه + پین ثابت مرکز (چیدمان نمونه، تم ما) */
.modal--geo { max-width: 720px; }
.modal--geo .modal-body { padding: 0; }
.modal--geo .modal-close { inset-inline: auto 14px; z-index: 1400; background: var(--surface-raised); box-shadow: var(--shadow-card); }
.geo-head { padding: 17px 22px 13px; }
.geo-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-strong); text-align: start; }

.geo-map-wrap { position: relative; }
.geo-map { height: 430px; width: 100%; }
.geo-map.leaflet-container { background: var(--surface-muted); font-family: inherit; }
/* تم دارک: تایل‌های نقشهٔ خانه هم مثل نقشهٔ آدرس تیره شوند */
html[data-theme="dark"] .geo-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }

/* نوار جستجوی شناور: [ جستجوی آدرس | جداکننده | دراپ‌داون شهر ] */
.geo-search { position: absolute; z-index: 1200; top: 14px; inset-inline: 14px; display: flex; align-items: stretch; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.geo-search__addr { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding-inline: 13px; }
.geo-search__ic { width: 17px; height: 17px; color: var(--muted); flex: none; }
.geo-search__addr input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; outline: none; padding-block: 13px; }
.geo-search__addr input::placeholder { color: var(--muted-2); }
.geo-search__div { flex: none; width: 1px; align-self: center; height: 26px; background: var(--line-strong); }
.geo-search__city { position: static; flex: none; }
.geo-city__btn { display: flex; align-items: center; gap: 6px; height: 100%; padding-inline: 15px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.geo-city__loc { width: 15px; height: 15px; color: var(--accent); flex: none; }
.geo-city__caret { width: 15px; height: 15px; color: var(--muted); flex: none; transition: transform .2s var(--ease); }
.geo-search__city.open .geo-city__caret { transform: rotate(180deg); }
/* برچسب placeholder وقتی شهری انتخاب نشده */
.geo-city__ph { color: var(--muted-2); font-weight: 600; }
/* پنل دراپ‌داون شهر — کارت سفید با گرادیانت ملایم + فیلد جستجوی پرزمینه + تیک انتخاب */
.geo-city__panel { position: absolute; z-index: 1350; top: calc(100% + 8px); inset-inline: 0; padding: 8px; background: linear-gradient(180deg, var(--surface-raised), var(--surface-solid)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.geo-city__search { display: flex; align-items: center; gap: 9px; margin: 2px 4px 10px; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: var(--surface-muted); }
.geo-city__search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.geo-city__search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.geo-city__list { max-height: 250px; overflow-y: auto; }
.geo-city__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: start; transition: background .14s var(--ease); }
.geo-city__opt:last-child { border-bottom: 0; }
.geo-city__opt:hover { background: var(--glass); }
.geo-city__opt.is-sel { background: color-mix(in srgb, var(--accent) 13%, transparent); font-weight: 700; }
.geo-city__opt small { color: var(--muted); font-size: 11px; flex: none; }
.geo-city__check { width: 16px; height: 16px; color: var(--accent); flex: none; }
.geo-city__empty { padding: 13px; text-align: center; color: var(--muted); font-size: 12.5px; }
/* پیشنهادهای جستجوی آدرس — همان سبک کارت */
.geo-suggest { position: absolute; z-index: 1340; top: calc(100% + 8px); inset-inline: 0; max-height: 244px; overflow-y: auto; padding: 6px; background: linear-gradient(180deg, var(--surface-raised), var(--surface-solid)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.geo-suggest button { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: start; padding: 9px 11px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.6; cursor: pointer; transition: background .14s var(--ease); }
.geo-suggest button:hover { background: var(--glass); }
.geo-suggest button svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 2px; }
.geo-suggest .geo-two { display: flex; flex-direction: column; gap: 1px; }
.geo-suggest .geo-two b { font-weight: 700; color: var(--text-strong); }
.geo-suggest .geo-two em { font-style: normal; font-size: 11px; color: var(--muted); }
.geo-suggest__empty { padding: 11px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* نوار راهنمای شناور پایین نقشه (مثل مودال آدرس) */
.geo-hint { position: absolute; z-index: 900; inset-block-end: 16px; inset-inline: 66px; margin-inline: auto; max-width: 430px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-pill); background: rgba(20, 15, 9, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 12px; line-height: 1.7; text-align: center; box-shadow: var(--shadow-card); }
.geo-hint svg { width: 15px; height: 15px; color: var(--accent-strong); flex: none; }
.geo-hint .osm-spin { width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: osm-spin .7s linear infinite; flex: none; }
/* دکمه‌های زوم +/− (آیکون SVG، هم‌رنگ تم) — گوشهٔ پایین‌چپ */
.geo-map.leaflet-container .leaflet-control-zoom { border: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); margin: 0 0 16px 16px; }
.geo-map.leaflet-container .leaflet-control-zoom a { display: grid; place-items: center; width: 34px; height: 34px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); transition: background .15s var(--ease), color .15s var(--ease); }
.geo-map.leaflet-container .leaflet-control-zoom a svg { width: 18px; height: 18px; stroke-width: 2.1; }
.geo-map.leaflet-container .leaflet-control-zoom a:hover { background: var(--accent); color: #fff; }
html[data-theme="light"] .geo-map.leaflet-container .leaflet-control-zoom a:hover { background: var(--accent-deep); color: #fff; }
/* دکمهٔ موقعیت من روی نقشه */
.geo-locate { position: absolute; z-index: 1100; inset-block-end: 16px; inset-inline-start: 16px; inset-inline-end: auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-solid); color: var(--accent-strong); box-shadow: var(--shadow-card); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.geo-locate:hover { background: var(--accent); color: #fff; }
.geo-locate svg { width: 20px; height: 20px; }

/* دو دکمهٔ پایین، کنار هم */
.geo-actions { display: flex; gap: 10px; padding: 14px 18px 18px; }
.geo-actions > * { flex: 1; }
.geo-login { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: .18s var(--ease); }
.geo-login svg { width: 17px; height: 17px; }
.geo-login:hover { border-color: var(--accent); color: var(--accent-strong); }
.geo-actions .btn-primary { width: 100%; }
.geo-actions .btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
html[data-theme="light"] .geo-locate:hover { background: var(--accent-deep); color: #fff; }

/* لایت: کارت‌ها و input ها سفید با گرادیانت ملایم — عین input مودال آدرس */
html[data-theme="light"] .geo-search { background: linear-gradient(150deg, #fff 0%, #fff 70%, #fff3ee 100%); border-color: rgba(143, 60, 34, .14); }
html[data-theme="light"] .geo-city__panel,
html[data-theme="light"] .geo-suggest { background: linear-gradient(180deg, #fff, #fffaf7); border-color: rgba(143, 60, 34, .12); }
html[data-theme="light"] .geo-city__search { background: linear-gradient(150deg, #fff 0%, #fff 68%, #fff3ee 100%); border-color: rgba(143, 60, 34, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96); }
html[data-theme="light"] .geo-city__opt:hover,
html[data-theme="light"] .geo-suggest button:hover { background: rgba(143, 60, 34, .055); }
html[data-theme="light"] .geo-city__opt.is-sel { background: color-mix(in srgb, var(--accent) 11%, #fff); }
html[data-theme="light"] .geo-locate,
html[data-theme="light"] .geo-map.leaflet-container .leaflet-control-zoom a { background: #fff; }

@media (max-width: 620px) {
  .modal--geo { max-width: 500px; }
  .geo-map { height: 380px; }
  .geo-city__btn { padding-inline: 11px; }
  .geo-search__addr { padding-inline: 11px; }
  .nearby-empty { flex-direction: column; text-align: center; }
  .nearby-empty__btn { width: 100%; }
}

/* ================= صفحه نتایج جستجوی محصولات ================= */
.search-results-hero { padding-bottom: 24px; }
.search-results-form { max-width: 760px; margin-top: 22px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-card); }
.search-results-form > svg { width: 21px; height: 21px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-results-form input { min-width: 0; padding: 10px 2px; border: 0; outline: 0; color: var(--text-strong); background: transparent; font: inherit; }
.search-results-form button { padding: 11px 22px; border: 0; border-radius: 12px; color: #fff; background: var(--accent); font: inherit; font-weight: 850; cursor: pointer; }
.search-results-content { padding-top: 8px; }
.search-scope-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.search-scope-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-raised); font: inherit; font-weight: 800; cursor: pointer; }
.search-scope-tabs button.is-active { color: var(--accent-strong); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); }
.search-scope-tabs span { font-size: 11px; }
.search-results-summary { min-height: 24px; margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.market-search-group + .market-search-group { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.market-search-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.market-search-group__head h2 { margin: 0; color: var(--text-strong); font-size: 20px; }
.market-search-group__head span { color: var(--muted); font-size: 12px; }
.market-search-empty { min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); }
.market-search-empty svg { width: 42px; height: 42px; fill: none; stroke: var(--accent); stroke-width: 1.4; }
.market-search-empty h2, .market-search-empty p { margin: 0; }
.market-search-empty h2 { color: var(--text-strong); font-size: 18px; }
.market-search-loading { min-height: 280px; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--surface-raised) 25%, color-mix(in srgb, var(--surface-raised) 70%, var(--line)) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: search-loading 1.2s infinite linear; }
.search-results-pager { margin-top: 30px; }
@keyframes search-loading { to { background-position: -200% 0; } }
@media (max-width: 640px) {
  .search-results-form { grid-template-columns: 20px minmax(0, 1fr); }
  .search-results-form button { grid-column: 1 / -1; }
  .search-scope-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .search-scope-tabs button { flex: 0 0 auto; }
}

/* ================= رفع باگ حالت خالی + فیلد جستجوی دراپ‌داون در لایت (v131) ================= */
/* باگ: .nearby-empty دارای display:flex بود و صفت hidden پنهانش نمی‌کرد → بعد از انتخاب شهر بدون رفلش پنهان نمی‌شد */
.nearby-empty[hidden] { display: none !important; }
/* فیلد جستجوی داخل دراپ‌داونِ سفید: پرزمینهٔ خاکستریِ ملایم به‌جای کادر سفیدِ محدود؛ بدون بردر درشت */
html[data-theme="light"] .geo-city__search { background: #f4f0e9; border-color: rgba(143, 60, 34, .05); box-shadow: none; }
html[data-theme="light"] .geo-search__div { background: rgba(143, 60, 34, .1); }

/* ================= geo v133: input تخت + دراپ‌داون بزرگ ================= */
/* input های جستجوی geo نباید کادر/بکگراند سفید و سایهٔ focusِ سراسری body.app-page (خط ~۴۵۶۸/۴۵۷۸) را بگیرند */
/* ایکون جزو input، بدون کادر جدا — حتی در حالت focus (عکس۱ → عکس۲) */
html[data-theme="light"] body.app-page .geo-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* ========================================================================== */
/* صفحات دسته‌بندی SEO و فیلترهای faceted */
.category-hero { padding-bottom: 20px; }
.category-page { overflow-x: clip; }
.category-hero h1 { max-width: 100%; overflow-wrap: anywhere; }
.category-hero p { max-width: 100%; }
.category-content { padding-top: 8px; }
.category-children { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 24px; }
.category-children a { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); transition: .2s var(--ease); }
.category-children a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.category-children a span { font-size: 13px; font-weight: 750; }
.category-children a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.category-toolbar { margin-top: 0; }
.category-page .filter-group h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--text-strong); font-size: 13px; }
.category-page .filter-group h2 svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.category-page .filter-check { justify-content: flex-start; }
.category-page .filter-check span { flex: 1; min-width: 0; }
.category-page .filter-check small { color: var(--muted-2); font-size: 11px; }
.filter-multi { position: relative; }
.filter-multi > summary { list-style: none; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; cursor: pointer; }
.filter-multi > summary::-webkit-details-marker { display: none; }
.filter-multi > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s var(--ease); }
.filter-multi[open] > summary { border-color: var(--accent); }
.filter-multi[open] > summary svg { transform: rotate(180deg); }
.filter-multi__panel { position: absolute; z-index: 24; inset-inline: 0; top: calc(100% + 6px); padding: 9px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.filter-multi__search { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.filter-multi__search svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.filter-multi__search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
.filter-multi__options { max-height: 210px; overflow-y: auto; padding-inline: 2px; scrollbar-width: thin; }
.filter-multi__clear { width: 100%; margin-top: 7px; padding: 7px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--danger); font: inherit; font-size: 11.5px; cursor: pointer; }
.active-filter-list { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.active-filter-list[hidden] { display: none; }
.active-filter-list button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--text); font: inherit; font-size: 11.5px; cursor: pointer; }
.active-filter-list button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.active-filter-list .active-filter-list__clear { border-color: transparent; background: transparent; color: var(--danger); }
.category-product h2 { margin: 0; font-size: inherit; }
.category-filter-submit { display: none; width: 100%; padding: 11px 15px; border: 0; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #1a120b; font: inherit; font-weight: 800; cursor: pointer; }
.category-page .shop-empty { min-height: 260px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.category-page .shop-empty svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.category-page .shop-empty h2 { margin: 8px 0 0; color: var(--text-strong); font-size: 17px; }
.category-page .shop-empty p { margin: 4px 0 10px; color: var(--muted); font-size: 12.5px; }
.category-page .shop-empty button { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }

@media (max-width: 860px) {
  .category-children { display: flex; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; grid-template-columns: none; margin-inline: 0; padding: 2px 0 10px; scrollbar-width: none; }
  .category-children::-webkit-scrollbar { display: none; }
  .category-children a { flex: 0 0 180px; }
  .category-filter-submit { display: block; position: sticky; bottom: 0; }
  .category-page .shop-filters { z-index: 5600; }
  .filter-multi__panel { position: static; margin-top: 5px; box-shadow: none; }
}

@media (max-width: 520px) {
  .category-hero { padding-bottom: 12px; }
  .category-children a { flex-basis: 158px; min-height: 48px; padding: 9px 12px; }
  .category-children a span { font-size: 12px; }
}

/* اصلاحات دقیق Light: فقط کارت‌های اکسسوری خواسته‌شده سفید می‌شوند. */
html[data-theme="light"] body.app-page .acc-a,
html[data-theme="light"] body.app-page .acc-b {
  background: #fff !important;
}

/* کنترل‌های فرم Light: گرادیان ظریف و مشترک؛ focus رنگ زمینه را عوض نمی‌کند. */
html[data-theme="light"] {
  --control-light-bg: linear-gradient(150deg, #fff 0%, #fffaf7 70%, #fff2ed 100%);
  --control-light-panel: linear-gradient(155deg, #fff 0%, #fff8f4 58%, #fff0e9 100%);
  --control-light-border: rgba(185, 99, 68, .22);
  --control-light-focus: rgba(185, 99, 68, .52);
}

html[data-theme="light"] body.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] body.app-page select,
html[data-theme="light"] body.app-page textarea,
html[data-theme="light"] body.app-page .modal-select ,html[data-theme="light"] .ss-main{
  background:linear-gradient(150deg, #fff 0%, #fff 68%, #fff 100%) !important /*var(--control-light-bg) !important*/;
  border: 1px solid var(--control-light-border) !important;
  color: #2a211b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] body.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
html[data-theme="light"] body.app-page select:focus,
html[data-theme="light"] body.app-page textarea:focus,
html[data-theme="light"] body.app-page .modal-select:focus {
  outline: 0 !important;
  /*background: var(--control-light-bg) !important;*/
  border-color: var(--control-light-focus) !important;
  /*box-shadow: 0 0 0 2px rgba(185, 99, 68, .07), inset 0 1px 0 rgba(255, 255, 255, .92) !important;*/
  /*direction:rtl;*/
}

.category-page .filter-group select,
.category-page .filter-search {
  min-height: 44px;
  border-radius: 10px;
  box-shadow: none;
}

/* ورودی جستجوی داخل dropdown یک input تو در تو دیده نشود. */
.category-page .filter-multi__search {
  min-height: 40px;
  padding: 0 10px;
  background: var(--surface-solid);
  border-color: var(--line-strong);
  border-radius: 10px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.category-page .filter-multi__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}

.category-page .filter-multi__search input,
.category-page .filter-multi__search input:focus,
html[data-theme="light"] body.category-page .filter-multi__search input,
html[data-theme="light"] body.category-page .filter-multi__search input:focus {
  min-height: 38px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.category-page .filter-multi__search {
  background: var(--control-light-bg);
  border-color: var(--control-light-border);
}

html[data-theme="light"] body.category-page .filter-multi__search:focus-within {
  background: var(--control-light-bg);
  border-color: var(--control-light-focus);
  box-shadow: 0 0 0 2px rgba(185, 99, 68, .07);
}

html[data-theme="light"] body.category-page .filter-multi > summary {
  background: var(--control-light-bg);
  border-color: var(--control-light-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

html[data-theme="light"] body.category-page .filter-multi[open] > summary {
  background: var(--control-light-bg);
  border-color: var(--control-light-focus);
}

html[data-theme="light"] body.category-page .filter-multi__panel {
  background: var(--control-light-panel);
  border-color: var(--control-light-border);
  box-shadow: 0 18px 38px -26px rgba(96, 62, 33, .28);
}

html[data-theme="light"] body.category-page .filter-multi__options .filter-check {
  margin-block: 6px;
  padding: 9px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
}


.map-card {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
}

/* Leaflet map */
.map-card .leaflet-container {
  width: 100%;
  height: 350px;
  border-radius: inherit;
  z-index: 1;
}

/* موبایل */
@media (max-width: 768px) {
  .map-card {
    width: 80%;
  }

  .map-card .leaflet-container {
    height: 300px;
  }
}

/* موبایل کوچک */
@media (max-width: 480px) {
  .map-card {
    width: 90%;
  }

  .map-card .leaflet-container {
    height: 260px;
  }
}
.row.uploader-cards {
  display: flex;
  flex-wrap: wrap;
}

.row.uploader-cards .col-md-3 {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
}

.row.uploader-cards .col-md-3.col-sm-6 {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
}

@media (max-width: 767px) {
  .row.uploader-cards .col-md-3,
  .row.uploader-cards .col-md-3.col-sm-6 {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}


.vendor-roast-form-page  .form-grid.price-weight-row{
  align-items: center;
  justify-content: space-between;
      grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vendor-roast-form-page .mini-action--danger{
 /* max-width: 77px;
  max-height: 15px;*/
}
@media (max-width: 767px) {
  .vendor-roast-form-page .form-grid.price-weight-row{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.desk-panel__head .btn-primary{
  width: max-content;
}
.charge-form input{
  border-radius: 10px;
  padding: 7px;
}
.charge-form{
  margin:22px auto;
}
.d-none{display:none !important;}
.product-mini-card{
  padding: 17px 14px;
}
.popular-item__rank img{
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: none;
  transform: none;
}


.s2-stars {
  position: relative;
  display: inline-flex;
  direction: ltr; /* جهت ستاره‌ها باید حتما LTR باشد تا پر شدن از چپ به راست یا درست صورت گیرد */
  line-height: 1;
}

.s2-stars__row {
  display: flex;
  gap: 2px; /* فاصله بین ستاره‌ها (در صورت نیاز تغییر دهید) */
}

/* لایه ستاره‌های خالی (خاکستری/خاموش) */
.s2-stars__base {
  color: #ccc; /* رنگ ستاره‌های پس‌زمینه */
}

/* لایه ستاره‌های پر شده (رنگی) */
.s2-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--fill, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: #ff9800; /* رنگ ستاره‌های پر */
  pointer-events: none;
}

/* تنظیم اندازه SVGها */
.s2-stars svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}


.star.star--empty{
  fill: rgb(129 129 129);
}

.rv-all-modal .rv-card{
  margin:8px 0;
}
svg.star.star--filled{
  fill: #d98745;
  stroke: #d98745;
}





/**accessory slid*/
.rv-slider-shell {
  position: relative;

  align-items: center;
  gap: 10px;
  width: 100%;
}

.rv-slider-shell .rv-list {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.rv-slider-shell .rv-list::-webkit-scrollbar {
  display: none;
}

/* موبایل: 1.5 کارت */
.rv-slider-shell .rv-card {
  flex: 0 0 calc((100% - 12px) / 1.5);
  min-width: 0;

  scroll-snap-align: start;
}

.rv-slider-btn--prev{position: absolute;
  right: -15px;}
  .rv-slider-btn--next{position: absolute;
    left: 0px;}
/* دسکتاپ: 3.5 کارت */
@media (min-width: 768px) {
  .rv-slider-shell .rv-card {
    flex-basis: calc((100% - 36px) / 3.5);
  }
}

@media (max-width: 768px) {
.ap2 #ap2-reviews .rv-card {
  min-width: unset;
  max-width:100%;
}
.ap2 #ap2-reviews .rv-summary{
    /*  width: calc(100% - 150px);*/
    margin-bottom: 18px;
}
}


.rv-slider-btn {

/*
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;
*/
  cursor: pointer;
}

.rv-slider-btn svg {
  width: 18px;
  height: 18px;
}
/**accessory slid*/
/* =========================================
 *  AP2 RELATED SLIDER
 *  ========================================= */
.ap2-related-slider {
  position: relative;
 /* display: flex;*/
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ap2-related {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

.ap2-related::-webkit-scrollbar {
  display: none;
}

/* کارت‌ها - حالت دسکتاپ (۳ کارت) */
.ap2-related > .acc-b {
  flex: 0 0 calc((100% - 24px) / 3); /* ۳ کارت */
  min-width: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* دکمه‌های دو طرف */
.ap2-related-slider__btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 50%;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
  z-index: 2;
}

.ap2-related-slider__btn:hover {
  transform: scale(1.06);
}

.ap2-related-slider__btn:active {
  transform: scale(.96);
}

.ap2-related-slider__btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.ap2-related-slider__btn[disabled] {
  opacity: .35;
  pointer-events: none;
}


.ap2-related-slider__btn--prev{
position:absolute;
top:64px;
right:0;
}

.ap2-related-slider__btn--next{
  position:absolute;
  top:64px;
  left:0;
}

/* ======================================== */
/* تنظیمات موبایل */
/* ======================================== */
@media (max-width: 768px) {
  .ap2-related-slider {
    gap: 8px;
  }

  .ap2-related {
    gap: 10px;
    padding: 4px 0;
    scroll-snap-type: x mandatory;
  }

  /* گزینه ۱: نمایش ۱.۵ کارت (معمول در موبایل) */
  .ap2-related > .acc-b {
    flex: 0 0 calc(70% - 10px); /* ۱.۵ کارت */
  }

  /* گزینه ۲: نمایش ۲ کارت کامل */
  /* .ap2-related > .acc-b {
   *   flex: 0 0 calc((100% - 10px) / 2);
} */

  /* گزینه ۳: نمایش ۱ کارت کامل */
  /* .ap2-related > .acc-b {
   *   flex: 0 0 calc(100% - 10px);
} */

  .ap2-related-slider__btn {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .ap2-related-slider__btn svg {
    width: 16px;
    height: 16px;
  }
}

/* صفحه‌های خیلی کوچک (موبایل‌های قدیمی) */
@media (max-width: 480px) {
  .ap2-related > .acc-b {
    flex: 0 0 calc(85% - 8px);
  }
}

/* Blog editorial surfaces: the light theme stays clean and paper-white. */
html[data-theme="light"] body[data-page="blog"] .blog-card,
html[data-theme="light"] body[data-page="blog"] .blog-card__body,
html[data-theme="light"] body[data-page="article"] .article-content-box,
html[data-theme="light"] body[data-page="article"] .article-sidebar-card {
  background: #fff;
}

html[data-theme="light"] body[data-page="article"] .article-content-box,
html[data-theme="light"] body[data-page="article"] .article-sidebar-card {
  border-color: rgba(34, 22, 16, .08);
  box-shadow: 0 16px 38px rgba(28, 17, 10, .055);
}

.ap2-offers-panel .ap2-offer .ap2-offer__option{display:none;}
.rv-card__who .review-card__date,.smallerfont{
  font-size: 15px;
  transform: scale(0.8);
  transform-origin: right top;
  display: inline-block;
}
@media (max-width: 720px) {
.product-page .product-content-layout{
      margin: 15px auto;
}

}




.ss-content.ss-open {
  background: var(--surface-muted);
}
.ss-content .ss-list .ss-option{
  color:#fff;
}
.ss-content .ss-search input{
  direction: rtl  !important;
  text-align: right !important;
}

html[data-theme="light"] .ss-content .ss-list .ss-option{
  color:#222;
}

.shop-bar .shop-count{display:none;}
.desk-panel .chip-row{
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.homepopulatstar{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold) !important;
  padding-right: 8px;
}



/*gallery*/
.ap2-stage__frame {
  flex: none !important;
  position: relative;
  width: 100%;
  height: auto;           /* مهم: ارتفاع ثابت نده */
  overflow: hidden;
  line-height: 0;         /* فاصله اضافی زیر تصویر/ویدیو رو از بین می‌بره */
}

.ap2-stage__frame [data-main-media] {
  display: block;
  width: 100%;
}

.ap2-stage__frame img,
.ap2-stage__frame video {
  display: block;
  width: 100%;
  height: auto;           /* ارتفاع طبیعی خودش */
  max-height: none;       /* اگر جایی max-height داری حذفش کن */
  object-fit: contain;    /* یا cover اگر می‌خوای پر کنه */
}
/*gallery*/
.footer-brand img{
      max-height: 90px;
}
/* ================================
 *  Product Skeleton
 *  ================================ */

.shop-card--skeleton {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/* تمام skeleton ها */
.shop-card--skeleton .skeleton-line,
.shop-card--skeleton .skeleton-chip,
.shop-card--skeleton .skeleton-button,
.shop-card--skeleton .skeleton-box {
  position: relative;
  overflow: hidden;
  background: #eeeeee;
}

/* shimmer */
.shop-card--skeleton .skeleton-line::after,
.shop-card--skeleton .skeleton-chip::after,
.shop-card--skeleton .skeleton-button::after,
.shop-card--skeleton .skeleton-box::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
                              transparent 100%
  );
  animation: productSkeletonShimmer 1.4s ease-in-out infinite;
}

/* تصویر */
.shop-card--skeleton .shop-card__media {
  position: relative;
  background: #eeeeee;
}

.shop-card--skeleton .skeleton-box {
  width: calc(100% - 20px);
  height: 100%;
  min-height: 220px;
  border-radius: inherit;
}

/* ردیف بالایی */
.shop-card--skeleton .skeleton-line {
  display: inline-block;
  height: 14px;
  border-radius: 7px;
}

.shop-card--skeleton .skeleton-line--roaster {
  width: 85px;
}

.shop-card--skeleton .skeleton-line--rating {
  width: 42px;
}

/* عنوان */
.shop-card--skeleton .skeleton-line--title {
  display: block;
  width: 72%;
  height: 21px;
  margin-top: 16px;
  border-radius: 7px;
}

/* چیپ */
.shop-card--skeleton .skeleton-chip {
  display: inline-block;
  width: 52px;
  height: 27px;
  margin-top: 14px;
  border-radius: 8px;
}

/* قیمت */
.shop-card--skeleton .skeleton-line--price {
  display: inline-block;
  width: 78px;
  height: 20px;
  border-radius: 6px;
}

.shop-card--skeleton .skeleton-line--currency {
  display: inline-block;
  width: 42px;
  height: 14px;
  margin-right: 5px;
  border-radius: 5px;
}

/* دکمه */
.shop-card--skeleton .skeleton-button {
  display: block;
  width: 78px;
  height: 36px;
  border-radius: 9px;
}

/* animation */
@keyframes productSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}



/* =========================================================
 *  ACC-B PRODUCT SKELETON
 *  Completely isolated from shop-card skeleton
 *  ========================================================= */

.acc-b--skeleton {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------
 *  Base skeleton surface
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__category > span,
.acc-b--skeleton .acc-skel__title > span,
.acc-b--skeleton .acc-skel__meta > span,
.acc-b--skeleton .acc-skel__price,
.acc-b--skeleton .acc-skel__currency,
.acc-b--skeleton .acc-skel__old-price,
.acc-b--skeleton .acc-skel__add,
.acc-b--skeleton .acc-skel__stock > span,
.acc-b--skeleton .acc-skel__media {
  background: #eeeeee;
}

/* ---------------------------------------------------------
 *  Shimmer
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__category > span,
.acc-b--skeleton .acc-skel__title > span,
.acc-b--skeleton .acc-skel__meta > span,
.acc-b--skeleton .acc-skel__price,
.acc-b--skeleton .acc-skel__currency,
.acc-b--skeleton .acc-skel__old-price,
.acc-b--skeleton .acc-skel__add,
.acc-b--skeleton .acc-skel__stock > span,
.acc-b--skeleton .acc-skel__media {
  position: relative;
  overflow: hidden;
}

.acc-b--skeleton .acc-skel__category > span::after,
.acc-b--skeleton .acc-skel__title > span::after,
.acc-b--skeleton .acc-skel__meta > span::after,
.acc-b--skeleton .acc-skel__price::after,
.acc-b--skeleton .acc-skel__currency::after,
.acc-b--skeleton .acc-skel__old-price::after,
.acc-b--skeleton .acc-skel__add::after,
.acc-b--skeleton .acc-skel__stock > span::after,
.acc-b--skeleton .acc-skel__media::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, .7) 50%,
                              transparent 80%
  );

  transform: translateX(-120%);
  animation: accProductSkeletonShimmer 1.6s ease-in-out infinite;
}

@keyframes accProductSkeletonShimmer {
  100% {
    transform: translateX(120%);
  }
}

/* ---------------------------------------------------------
 *  Image
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__media {
  position: relative;
  overflow: hidden;
}

/*
 *  اگر acc-b__media نسبت تصویر مشخصی دارد،
 *  همین نسبت توسط خود container اصلی حفظ می‌شود.
 */

.acc-b--skeleton .acc-skel__media {
  background: #eeeeee;
}

/* ---------------------------------------------------------
 *  Stock
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__stock {
  color: transparent;
}

.acc-b--skeleton .acc-skel__stock i {
  background: #e5e5e5;
  opacity: .9;
}

.acc-b--skeleton .acc-skel__stock > span {
  display: inline-block;
  width: 45px;
  height: 12px;
  border-radius: 6px;
  vertical-align: middle;
}

/* ---------------------------------------------------------
 *  Category
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__category {
  display: flex;
  align-items: center;
  min-height: 18px;
}

.acc-b--skeleton .acc-skel__category > span {
  display: block;
  width: 145px;
  height: 13px;
  border-radius: 6px;
}

/* ---------------------------------------------------------
 *  Product title
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__title {
  margin-top: 10px;
}

.acc-b--skeleton .acc-skel__title > span {
  display: block;
  width: 82%;
  height: 20px;
  border-radius: 7px;
}

.acc-b--skeleton .acc-skel__title::after {
  content: "";
  display: block;
  width: 58%;
  height: 20px;
  margin-top: 7px;
  border-radius: 7px;
  background: #eeeeee;
  position: relative;
  overflow: hidden;
}

/* ---------------------------------------------------------
 *  Meta
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__meta {
  margin-top: 13px;
}

.acc-b--skeleton .acc-skel__meta > span {
  display: inline-block;
  width: 54px;
  height: 22px;
  border-radius: 7px;
}

/* ---------------------------------------------------------
 *  Price
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-b__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.acc-b--skeleton .acc-skel__price {
  display: inline-block;
  width: 95px;
  height: 20px;
  border-radius: 6px;
}

.acc-b--skeleton .acc-skel__currency {
  display: inline-block;
  width: 34px;
  height: 13px;
  border-radius: 5px;
}

.acc-b--skeleton .acc-skel__old-price {
  display: block;
  width: 82px;
  height: 12px;
  margin-top: 5px;
  border-radius: 5px;
  opacity: .7;
}

/* ---------------------------------------------------------
 *  Add / details button
 *  --------------------------------------------------------- */

.acc-b--skeleton .acc-skel__add {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
}


.roasters .city__search{
  margin-bottom: 0;
  padding: 7px 14px;
}
.roasters .geo-city__list {
  position: absolute;
  z-index: 999;
  background: var(--bg);
  width: 234px;
  max-height: 250px;
}


.alert.alert-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  padding: 12px 16px;
  border: 1px solid #ffe08a;
  border-radius: 10px;
  background: #fff8df;
  color: #795900;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
}

.alert.alert-warning::before {
  content: "!";

  font-weight: 900;
  font-size: 17px;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .list-row__body {
    flex: 1 1 60px;
  }
}
@media (max-width: 860px) {
  .customer-support{display:none;}
}
.searchpageinput,html[data-theme="light"] body.app-page input.searchpageinput:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),.search-results-form input{
  background: #ffffff00 !important;
  border-color: #ffffff00 !important;
}
.searchpageinput:focus,html[data-theme="light"] body.app-page input.searchpageinput:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,.search-results-form input:focus{
  background: #ffffff00 !important;
  border-color: #ffffff00 !important;
  box-shadow: unset !important;
}

/* Roast products: scoped layout for products with multiple weight variants. */
.vendor-roast-product-row {
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
}
.vendor-roast-product-row .list-row__img {
  width: 64px;
  height: 64px;
  align-self: start;
}
.vendor-roast-product-row .listtedadrastriproduct {
  display: grid;
  align-content: start;
  gap: 11px;
}
.vendor-roast-product__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}
.vendor-roast-product__head > b { font-size: 14px; }
.vendor-roast-product__head .status-pill { white-space: nowrap; }
.vendor-roast-product-row .vendor-roast-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 8px;
  width: 100%;
  color: inherit;
}
.vendor-roast-variant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}
.vendor-roast-variant__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 6px;
  min-width: 0;
}
.vendor-roast-variant__price strong {
  width: 100%;
  color: var(--text-strong);
  font-size: 11.5px;
}
.vendor-roast-variant__price span {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.vendor-roast-variant__price .compare-at-price {
  margin: 0;
  font-size: 9.5px;
  white-space: nowrap;
}
.vendor-roast-variant__stock { flex: none; }
.vendor-roast-variant__quantity {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  color: var(--muted-2);
  font-size: 9.5px;
  text-align: center;
}
.vendor-roast-variant__quantity b {
  color: var(--text-strong);
  font-size: 11.5px;
}
.vendor-roast-variants__empty {
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
}
.vendor-roast-product__status {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.vendor-roast-product-row .vendor-product-actions {
  align-self: start;
  margin-inline-start: 0;
}
@media (max-width: 980px) {
  .vendor-roast-product-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .vendor-roast-product-row .list-row__img { width: 58px; height: 58px; }
  .vendor-roast-product__status,
  .vendor-roast-product-row .vendor-product-actions {
    grid-column: 2;
  }
  .vendor-roast-product__status { grid-row: auto; }

.cart-checkout .cart-item{display:flex;flex-direction: column;}
.cart-checkout .ci-side{    flex-direction: unset;}
.coffee-buy-panel__fav{top: 3px;}
}
@media (max-width: 620px) {
  .vendor-roast-product-row { padding: 11px; gap: 10px; }
  .vendor-roast-product-row .vendor-roast-variants { grid-template-columns: 1fr; }
  .vendor-roast-variant { grid-template-columns: minmax(0, 1fr) auto; }
  .vendor-roast-product__status,
  .vendor-roast-product-row .vendor-product-actions { grid-column: 1 / -1; }
  .vendor-roast-product-row .vendor-product-actions { justify-content: flex-start; }
}