/* ======================================================
   GeetAI Studio — 30 Product Card Templates
   6 families × 5 variants each. Selectable from Admin →
   Template Selection. Applied to affiliate product cards.
   ====================================================== */

/* --- Family base (shared) --- */
.af-card, .af-fcard { position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.af-card:hover, .af-fcard:hover { transform: translateY(-4px); }
.af-card-img img, .af-fcard-img img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* ============ PREMIUM (5) — rich gradient, gold accents, deep shadows ============ */
.tmpl-premium-1 .af-card { background: linear-gradient(160deg,#1a1a2e,#16213e); border-radius:18px; border:1px solid #2a2a4a; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.4); }
.tmpl-premium-1 .af-card-img img { border-radius:18px 18px 0 0; }
.tmpl-premium-1 .af-card-price { color:#ffd700; font-weight:800; }

.tmpl-premium-2 .af-card { background: linear-gradient(135deg,#0f2027,#203a43,#2c5364); border-radius:16px; color:#fff; border:1px solid #3a5a6a; box-shadow:0 10px 30px rgba(44,83,100,.35); }
.tmpl-premium-2 .af-card-name { color:#e8f6ff; }
.tmpl-premium-2 .af-card-disc { color:#4ade80; font-weight:700; }

.tmpl-premium-3 .af-card { background: linear-gradient(120deg,#232526,#414345); border-radius:14px; color:#f5f5f5; border-left:4px solid #e94560; box-shadow:0 8px 28px rgba(0,0,0,.4); }
.tmpl-premium-3 .af-card-more { background:#e94560; }

.tmpl-premium-4 .af-card { background:#111827; border-radius:20px; border:1px solid #1f2937; color:#f9fafb; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.tmpl-premium-4 .af-card-img img { border-bottom:2px solid #eab308; }
.tmpl-premium-4 .af-card-badge { background:linear-gradient(90deg,#f59e0b,#eab308); color:#111; }

.tmpl-premium-5 .af-card { background: linear-gradient(160deg,#1e1b4b,#312e81); border-radius:18px; color:#fff; border:1px solid #4c1d95; box-shadow:0 14px 44px rgba(76,29,149,.35); }
.tmpl-premium-5 .af-card-price { color:#a78bfa; font-weight:800; font-size:20px; }

/* ============ LUXURY (5) — black/gold, serif accents, fine borders ============ */
.tmpl-luxury-1 .af-card { background:#0a0a0a; border:1px solid #d4af37; border-radius:4px; color:#f5e6c4; box-shadow:0 10px 30px rgba(212,175,55,.12); }
.tmpl-luxury-1 .af-card-name { font-family:Georgia,'Times New Roman',serif; font-weight:700; }
.tmpl-luxury-1 .af-card-price { color:#d4af37; font-family:Georgia,serif; }

.tmpl-luxury-2 .af-card { background:#151515; border:1px solid #8a7a4a; border-radius:12px; color:#e8dcc0; box-shadow:inset 0 0 0 1px rgba(212,175,55,.15), 0 8px 24px rgba(0,0,0,.5); }
.tmpl-luxury-2 .af-card-badge { background:#d4af37; color:#111; font-family:Georgia,serif; letter-spacing:1px; }

.tmpl-luxury-3 .af-card { background: linear-gradient(145deg,#1c1c1c,#2b2b2b); border:1px solid #b8963e; border-radius:8px; color:#f0e6cc; }
.tmpl-luxury-3 .af-card-name { font-family:Georgia,serif; font-style:italic; }
.tmpl-luxury-3 .af-card-more { background:transparent; border:1px solid #d4af37; color:#d4af37; }

.tmpl-luxury-4 .af-card { background:#101010; border-top:3px solid #c9a227; border-radius:0 0 14px 14px; color:#efe3c0; box-shadow:0 12px 36px rgba(0,0,0,.6); }
.tmpl-luxury-4 .af-card-img img { border-bottom:1px solid #c9a227; }
.tmpl-luxury-4 .af-card-rating { color:#d4af37; }

.tmpl-luxury-5 .af-card { background: linear-gradient(180deg,#1a1a1a,#0d0d0d); border:1px solid #b79b3f; border-radius:16px; color:#f2e6c8; }
.tmpl-luxury-5 .af-card-name { font-family:Georgia,serif; }
.tmpl-luxury-5 .af-card-mrp { color:#a0853a; }

/* ============ MINIMAL (5) — clean white, thin borders, small type ============ */
.tmpl-minimal-1 .af-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; color:#111827; box-shadow:none; }
.tmpl-minimal-1 .af-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.06); }
.tmpl-minimal-1 .af-card-price { font-weight:700; }

.tmpl-minimal-2 .af-card { background:#fafafa; border:1px solid #f0f0f0; border-radius:8px; color:#111; }
.tmpl-minimal-2 .af-card-img img { background:#f5f5f5; }
.tmpl-minimal-2 .af-card-name { font-weight:500; color:#333; }

.tmpl-minimal-3 .af-card { background:#fff; border-bottom:2px solid #111; border-radius:0; color:#111; }
.tmpl-minimal-3 .af-card:hover { border-bottom-color:#2563eb; }
.tmpl-minimal-3 .af-card-price { color:#2563eb; }

.tmpl-minimal-4 .af-card { background:#f8f8f6; border:none; border-radius:12px; color:#1a1a1a; }
.tmpl-minimal-4 .af-card-img img { border-radius:12px 12px 0 0; }
.tmpl-minimal-4 .af-card-badge { background:#eef2ff; color:#4f46e5; }

.tmpl-minimal-5 .af-card { background:#fff; border:1px solid #e2e8f0; border-radius:6px; color:#0f172a; }
.tmpl-minimal-5 .af-card-more { background:#0f172a; border-radius:4px; }

/* ============ GLASS (5) — frosted blur, translucent, borders ============ */
.tmpl-glass-1 .af-card { background:rgba(255,255,255,.08); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.18); border-radius:20px; color:#fff; }
.tmpl-glass-1 .af-card-img img { border-radius:20px 20px 0 0; }
.tmpl-glass-1 .af-card-more { background:rgba(255,255,255,.2); backdrop-filter:blur(8px); }

.tmpl-glass-2 .af-card { background:rgba(255,255,255,.12); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.25); border-radius:16px; color:#fff; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.tmpl-glass-2 .af-card-name { color:#f0f9ff; }

.tmpl-glass-3 .af-card { background:rgba(16,185,129,.06); backdrop-filter:blur(24px); border:1px solid rgba(16,185,129,.25); border-radius:18px; color:#ecfdf5; }
.tmpl-glass-3 .af-card-price { color:#34d399; }

.tmpl-glass-4 .af-card { background:rgba(99,102,241,.08); backdrop-filter:blur(18px); border:1px solid rgba(99,102,241,.3); border-radius:22px; color:#eef2ff; }
.tmpl-glass-4 .af-card:hover { border-color:rgba(129,140,248,.6); }

.tmpl-glass-5 .af-card { background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05)); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; }
.tmpl-glass-5 .af-card-badge { background:rgba(255,255,255,.25); backdrop-filter:blur(6px); color:#fff; }

/* ============ DARK (5) — near-black, neon accents ============ */
.tmpl-dark-1 .af-card { background:#0d0d0f; border:1px solid #26262b; border-radius:16px; color:#f4f4f5; }
.tmpl-dark-1 .af-card-name { color:#fafafa; }
.tmpl-dark-1 .af-card-price { color:#22d3ee; font-weight:700; }

.tmpl-dark-2 .af-card { background:#121216; border:1px solid #2f2f3a; border-radius:12px; color:#e4e4e7; box-shadow:0 0 0 1px rgba(34,211,238,.08); }
.tmpl-dark-2 .af-card-badge { background:rgba(34,211,238,.15); color:#22d3ee; }

.tmpl-dark-3 .af-card { background:#0a0a0c; border-top:2px solid #a855f7; border-radius:0 0 14px 14px; color:#f3e8ff; }
.tmpl-dark-3 .af-card-price { color:#c084fc; }

.tmpl-dark-4 .af-card { background:linear-gradient(160deg,#131316,#1c1c22); border:1px solid #3f3f46; border-radius:18px; color:#fafafa; }
.tmpl-dark-4 .af-card-img img { filter:saturate(.9); }
.tmpl-dark-4 .af-card-more { background:#f43f5e; }

.tmpl-dark-5 .af-card { background:#0b0f19; border:1px solid #1e293b; border-radius:14px; color:#f1f5f9; box-shadow:0 0 30px rgba(59,130,246,.08); }
.tmpl-dark-5 .af-card-price { color:#60a5fa; }

/* ============ MOBILE-FIRST (5) — touch targets, stacked, sticky CTAs ============ */
.tmpl-mobile-1 .af-card { border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.tmpl-mobile-1 .af-card-img img { height:220px; }
.tmpl-mobile-1 .af-card-more { min-height:48px; font-size:16px; width:100%; margin-top:10px; }

.tmpl-mobile-2 .af-card { border-radius:16px; }
.tmpl-mobile-2 .af-card-name { font-size:15px; line-height:1.4; min-height:42px; }
.tmpl-mobile-2 .af-card-price-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tmpl-mobile-2 .af-card-more { min-height:52px; border-radius:12px; font-weight:700; }

.tmpl-mobile-3 .af-card { border-radius:18px; }
.tmpl-mobile-3 .af-card-img img { height:240px; }
.tmpl-mobile-3 .af-card-more { min-height:48px; background:#059669; }

.tmpl-mobile-4 .af-card { border-radius:12px; }
.tmpl-mobile-4 .af-card-more { min-height:44px; }
.tmpl-mobile-4 .af-card-name { font-size:14px; }

.tmpl-mobile-5 .af-card { border-radius:20px; }
.tmpl-mobile-5 .af-card-img img { height:200px; border-radius:20px 20px 0 0; }
.tmpl-mobile-5 .af-card-more { min-height:50px; width:100%; border-radius:10px; font-size:15px; }