/* ================================================================
   کافه‌حساب — پکیج طراحی صفحه‌به‌صفحه (جین برند قهوه‌ای + وزیرمتن)
   توکن‌های پایه از سیستم تم خود پلاگین (spe-theme-vars) می‌آیند
   ================================================================ */

/* ── ۱) تایپوگرافی ── */
body.spe-ui h1, body.spe-ui h2, body.spe-ui .spe-page-title {
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  line-height: 1.5;
}
body.spe-ui h3, body.spe-ui .spe-sec-title { font-weight: 700 !important; }

/* ── ۲) دکمه اصلی: گرادیان قهوه‌ای + سایه نرم ── */
.spe-btn-primary, .spe-ui .spe-btn-primary, .spe-bld button[class*="spe-btn"][class*="primary"] {
  background: linear-gradient(135deg, var(--spe-primary) 0%, var(--spe-primary-dark) 100%) !important;
  box-shadow: 0 6px 16px rgba(122, 74, 33, 0.26);
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
.spe-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(122, 74, 33, 0.34);
}
.spe-btn-primary:active { transform: translateY(0); }
.spe-btn-link { color: var(--spe-primary) !important; font-weight: 600; }

/* ── ۳) کارت محصول (ردیف ویژه فروشگاه) ── */
.spe-fpr-card {
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: var(--spe-radius) !important;
  overflow: hidden;
}
.spe-fpr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(78, 52, 46, 0.14);
}
.spe-fpr-card img { transition: transform .3s ease; }
.spe-fpr-card:hover img { transform: scale(1.04); }
.spe-fpr-price { color: var(--spe-primary) !important; font-weight: 800; }

/* ── ۴) کاشی دسته‌بندی ── */
.spe-cat-tile {
  border-radius: var(--spe-radius) !important;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.spe-cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(78, 52, 46, 0.13);
}
.spe-cat-tile-img { transition: transform .35s ease; }
.spe-cat-tile:hover .spe-cat-tile-img { transform: scale(1.06); }
.spe-cat-tile-name { font-weight: 700; }

/* ── ۵) سایدبار پنل مشتری ── */
.spe-dash-side {
  position: sticky;
  top: 18px;
  border-radius: var(--spe-radius) !important;
  box-shadow: 0 6px 22px rgba(78, 52, 46, 0.09);
  border: 1px solid rgba(78, 52, 46, 0.06);
  overflow: hidden;
}
.spe-dash-side a, .spe-dash-side .spe-dk-menu-item {
  border-radius: 10px !important;
  transition: background .15s ease, color .15s ease;
}
.spe-dash-side a:hover, .spe-dash-side .spe-dk-menu-item:hover {
  background: var(--spe-primary-light);
  color: var(--spe-primary);
}
.spe-dash-side .is-active a, .spe-dash-side .active {
  background: var(--spe-primary-light);
  color: var(--spe-primary) !important;
  font-weight: 700;
}
.spe-panel-box {
  border-radius: var(--spe-radius) !important;
  box-shadow: 0 6px 22px rgba(78, 52, 46, 0.07);
  border: 1px solid rgba(78, 52, 46, 0.05);
}

/* ── ۶) سبد خرید و تسویه ── */
.spe-cart-wrap, .spe-checkout-wrap .spe-panel-box {
  border-radius: var(--spe-radius) !important;
  box-shadow: 0 10px 28px rgba(78, 52, 46, 0.08);
}
.spe-cart-header { border-bottom: 2px solid var(--spe-primary-light); }
.spe-cart-items { font-weight: 500; }

/* ── ۷) فرم‌ها: فوکوس برند ── */
.spe-ui input:focus, .spe-ui textarea:focus, .spe-ui select:focus,
.spe-checkout-wrap input:focus, .spe-cart-wrap input:focus, .spe-panel-box input:focus {
  border-color: var(--spe-primary) !important;
  box-shadow: 0 0 0 3px var(--spe-accent-soft) !important;
  outline: none !important;
}

/* ── ۸) هدر فروشگاه: سایه ملایم ── */
.spe-bld-header {
  box-shadow: 0 2px 14px rgba(78, 52, 46, 0.07);
}
.spe-hdr-account-btn:hover, .spe-hdr-icon-btn:hover {
  background: var(--spe-primary-light);
  color: var(--spe-primary);
}

/* ── ۹) پاورقی سایت ── */
.spe-fp-footer { border-top: 3px solid var(--spe-primary); }

/* ── ۱۰) موبایل: لمس‌پذیری و فاصله ── */
@media (max-width: 480px) {
  .spe-btn-primary, .spe-fpr-btn, .spe-cart-wrap button[class*="primary"] {
    min-height: 46px;
    font-size: 15px;
  }
  .spe-fpr-card:hover { transform: none; }
  .spe-dash-side { position: static; margin-bottom: 14px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}