.products-page {
  min-height: 100vh;
  color: #f7f8fc;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.09), transparent 14%),
    radial-gradient(circle at 88% 86%, rgba(255,255,255,.06), transparent 12%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}
.products-shell { width: min(1180px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 28px 0 56px; }
.products-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(34px, 7vw, 82px); }
.products-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); text-decoration: none; font-size: clamp(20px, 3vw, 30px); font-weight: 900; }
.products-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); gap: 24px; justify-content: center; }
.product-tile { display: flex; flex-direction: column; gap: 18px; align-items: center; text-decoration: none; color: #f7f8fc; }
.product-visual { width: min(280px, 100%); aspect-ratio: 1 / 1; padding: 24px; border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.24); display: grid; place-items: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.product-tile:hover .product-visual { transform: translateY(-3px); border-color: rgba(240,212,110,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 76px rgba(0,0,0,.30); }
.product-tile strong { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: #f5db75; text-align: center; }
@media (max-width: 620px) { .products-shell { padding-top: 20px; } .products-header { justify-content: center; text-align: center; } .products-grid { grid-template-columns: minmax(0, 1fr); } .product-visual { width: min(280px, 100%); margin: 0 auto; } }

/* ===== پیش‌نمایش کارت ویزیت هوشمند ===== */
.smart-card-preview { width: 100%; max-width: 190px; aspect-ratio: 3 / 4; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, #fff, #eef2fb); color: #16254f; box-shadow: 0 18px 42px rgba(0,0,0,.25); display: flex; flex-direction: column; justify-content: space-between; }
.smart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.smart-card-logo { color: var(--navy); font-size: 18px; font-weight: 900; }
.smart-card-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.38); }
.smart-card-lines { display: grid; gap: 10px; }
.smart-card-lines span { height: 12px; border-radius: 999px; background: #d9deec; }
.smart-card-lines span:last-child { width: 68%; }
.smart-card-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.smart-card-qr { width: 68px; height: 68px; border-radius: 12px; background: linear-gradient(90deg, #16254f 10px, transparent 10px) 0 0 / 18px 18px, linear-gradient(#16254f 10px, transparent 10px) 0 0 / 18px 18px, #fff; border: 6px solid #fff; outline: 1px solid #d9deec; }
.smart-card-badge { min-width: 48px; min-height: 32px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #16254f; font-weight: 900; font-size: 14px; }

/* ===== پیش‌نمایش پنل کافه رستوران‌ها ===== */
.cafe-card-preview { width: 100%; max-width: 190px; aspect-ratio: 3 / 4; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, #fff, #eef2fb); color: #16254f; box-shadow: 0 18px 42px rgba(0,0,0,.25); position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.cafe-card-logo { color: var(--navy); font-size: 18px; font-weight: 900; }
.cafe-card-cups { display: flex; gap: 10px; justify-content: center; align-items: end; height: 70px; }
.cafe-cup { width: 34px; height: 40px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.38); position: relative; }
.cafe-cup:after { content: ""; position: absolute; right: -9px; top: 8px; width: 12px; height: 16px; border: 3px solid var(--gold); border-left: 0; border-radius: 0 12px 12px 0; }
.cafe-card-qr { width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(90deg, #16254f 9px, transparent 9px) 0 0 / 16px 16px, linear-gradient(#16254f 9px, transparent 9px) 0 0 / 16px 16px, #fff; border: 5px solid #fff; outline: 1px solid #d9deec; }
.cafe-card-badge { position: absolute; top: 14px; left: 14px; min-width: 44px; min-height: 28px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: var(--gold); font-weight: 900; font-size: 13px; }

/* ===== پیش‌نمایش عکس‌دار کارت پنل کافه (تامنیل واقعی) ===== */
.cafe-cover-visual { padding: 0 !important; overflow: hidden; aspect-ratio: 1 / 1; }
.cafe-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.product-tile:hover .cafe-cover-img { transform: scale(1.04); }

/* ===== پیش‌نمایش عکس‌دار کارت ویزیت (تامنیل واقعی) ===== */
.vcard-cover-visual { padding: 0 !important; overflow: hidden; aspect-ratio: 1 / 1; }