/* ==========================================================================
   polish.css — پرداخت طراحی چارقد (۱۴۰۵/۰۸/۱۰)
   این فایل بعد از style.css و extras.css بارگذاری می‌شود و فقط روی آن‌ها بازنویسی می‌کند.
   برای برگرداندن: خط <link> مربوط به polish.css را از layout.php حذف کنید.
   قواعد: فقط ویژگی‌های منطقی (inline/block)، بدون letter-spacing جدید، انیمیشن فقط transform/opacity.
   ========================================================================== */

/* ---------- ۱) تایپوگرافی فارسی ---------- */
body{line-height:1.8}
/* متن‌های ممتد (کلاس‌های سایت با line-height صریح، اولویت بالاتر دارند و دست‌نخورده می‌مانند) */
p,dd,blockquote,figcaption,.doc li,.blog-body li,.shipnote li,.hint,.cpsum,.lbl,.each{line-height:1.9}
/* عنوان‌ها */
h1,h2,h3,h4,h5,h6{line-height:1.5}
/* کنترل‌های تک‌خطی: ارتفاع آن‌ها با line-height بدنه بزرگ نشود */
button,input,select,textarea,.btn,.chip,.tag,.add,.big,.badge{line-height:1.6}
/* حروف فارسی نباید فاصله‌ی اضافه بگیرند (فاصله‌گذاری حروف، اتصال حروف را می‌شکند) */
.logo,.hero small,footer h4{letter-spacing:normal}

/* ---------- ۲) فوکوس کیبورد ---------- */
html{scroll-padding-top:calc(var(--hh) + 16px)}
@media (max-width:959.98px){
  /* نوار پایین موبایل المان فوکوس‌شده را نپوشاند */
  html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* سطوح تیره (نوار بالا، فوکوس روی فوتر، هِرو، نوار مدیر، زوم): طلایی روشن، کنتراست > ۷:۱ روی #3a0f22 */
.topbar :focus-visible,
footer :focus-visible,
.hero :focus-visible,
.adm-bar :focus-visible,
.zoom-ov :focus-visible,
.drawer .d-call:focus-visible{outline-color:var(--bar-gold)}
.bn :focus-visible{outline-width:3px}
/* فیلدهای متنی که outline:none دارند */
html :is(input,textarea,select):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* داخل کادرهای overflow:hidden حلقه‌ی بیرونی بریده می‌شود؛ حلقه را به داخل یا روی والد می‌بریم */
.qty:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.qty input:focus-visible{outline:none}
.qty button:focus-visible{outline-offset:-3px}
.card .img a:focus-visible,
.th:focus-visible,
.mimg .nav:focus-visible{outline-offset:-3px}

/* ---------- ۳) اندازه‌ی هدف لمسی (حداقل ۲۴، کنترل‌های اصلی ۴۴ پیکسل) ---------- */
.qty button{min-width:40px;min-height:40px}
.mi .qty button{min-width:44px;min-height:44px}
.mi .qty input{min-height:44px}
/* ردیف رنگ‌ها فشرده است: همان ۲۴ پیکسل کافی است (بدون تغییر چیدمان) */
.cp .qty button{min-width:24px;min-height:24px}
.cp .qty input{min-height:0}
.mimg .nav{min-width:44px;min-height:44px}
.cchips button.colb{min-height:44px}
.pager a,.pager span{min-width:44px;min-height:44px}
.x{min-width:44px;min-height:44px}
.rm{padding-block:8px;padding-inline:8px}
.chip{display:inline-flex;align-items:center;min-height:40px}
.card .info .add{min-height:40px}
.tb-soc{min-width:32px;justify-content:center}
.crumb a{display:inline-block;min-width:24px;min-height:24px;padding-block:2px}
.card h3 a{display:block;min-height:24px}
.spec dd a{display:inline-block;min-height:24px}
.map-lk{display:inline-block;min-height:24px}
.ft-acc>summary{min-height:24px}
.bn-nav{min-width:34px;min-height:34px}

/* ---------- ۴) کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  /* جابه‌جایی هنگام هاور/لمس حذف می‌شود (transform جایگاه‌دهی عناصر دست‌نخورده می‌ماند) */
  .card:hover,.blog-card:hover,.cartbtn:hover,.btn:hover,.bn-btn:hover,
  .social a:hover,.ig-btn:hover,.cc-i:hover .cc-img,.rv-rate-in label:active{transform:none}
  .bn-nav:hover{transform:translateY(-50%)}
  .ft-links a:hover{transform:none}
  /* فقط محوشدگی کوتاه برای اعلان و پوشش پشت منو */
  .toast{transition:opacity .15s linear!important}
  .ov{transition:opacity .15s linear!important}
}

/* ---------- ۵) انیمیشن فقط روی transform / opacity ---------- */
/* لینک‌های فوتر: به‌جای انیمیشن padding (باعث reflow) با transform جابه‌جا می‌شوند.
   جهت RTL ثابت است؛ جابه‌جایی به سمت پایان خط یعنی چپ (X منفی). */
.ft-links a{transition:color .15s,transform .15s}
.ft-links a:hover{padding-inline-start:0;transform:translateX(-4px)}

/* ---------- ۷) ردیف مشخصات (قواره، جنس، لبه) ---------- */
.ch-specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0 2px;padding:0}
.ch-specs li{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;line-height:1.6}
.ch-specs span{color:var(--muted);font-size:12px}
.ch-specs b{font-weight:700}
.ch-card-specs{font-size:11.5px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}