.exp-card { background: #FFFFFF; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #E2E8F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); position: relative; }
.exp-card:hover { transform: translateY(-6px); border-color: #000000; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.exp-img-wrapper { position: relative; width: 100%; aspect-ratio: 400/240; background: #F8FAFC; overflow: hidden; border-bottom: 1px solid #F1F5F9; }
.exp-img-link { display: block; width: 100%; height: 100%; }
.exp-img-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.exp-card:hover .exp-img-link img { transform: scale(1.08); }
.exp-urgency-badge { position: absolute; top: 12px; left: 12px; background: #000000; color: #FFFFFF; padding: 6px 12px; font-size: 0.75rem; font-weight: 800; border-radius: 30px; display: inline-flex; align-items: center; gap: 6px; z-index: 2; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.exp-pulse-dot { width: 8px; height: 8px; background-color: #FF3B30; border-radius: 50%; display: inline-block; animation: exp-pulse-red 1.5s infinite; }
@keyframes exp-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
.exp-content { padding: 0 20px 20px; display: flex; flex-direction: column; flex-grow: 1; position: relative; }
.exp-logo-box { width: 60px; height: 60px; background: #FFFFFF; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; padding: 8px; margin-top: -30px; margin-bottom: 16px; position: relative; z-index: 3; border: 1px solid #E2E8F0; transition: transform 0.3s ease; }
.exp-card:hover .exp-logo-box { transform: translateY(-4px); border-color: #000000; }
.exp-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.exp-title { font-size: 0.95rem; color: #475569; margin: 0 0 8px 0; line-height: 1.5; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-discount-text { font-size: 1.6rem; font-weight: 900; color: #000000; margin-bottom: auto; letter-spacing: -0.5px; padding-bottom: 16px; }
.exp-compare-box { background: #FFFFFF; border-radius: 12px; padding: 10px; margin-bottom: 16px; border: 1px solid #E2E8F0; border-left: 4px solid #D4FF00; transition: background 0.2s ease; }
.exp-compare-box:hover { background: #F8FAFC; }
.exp-compare-box a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #334155; }
.exp-compare-box i { font-size: 1.1rem; color: #000000; background: #D4FF00; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.exp-compare-text { display: flex; flex-direction: column; overflow: hidden; width: 100%; }
.exp-compare-text span { font-size: 0.7rem; line-height: 1; color: #64748B; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.exp-compare-text strong { color: #000000; font-size: 0.85rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-btn-black { background: #000000; color: #D4FF00; font-size: 0.95rem; font-weight: 800; border: 2px solid #000000; padding: 12px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
.exp-btn-black:hover { background: #D4FF00; color: #000000; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3); }