/* --- Reset & Base --- */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: #f5f7fa; margin: 0; padding: 0; color: #333; }

/* --- Header --- */
header { background: #0B3865; padding: 20px 0; text-align: center; }
.logo { height: 60px; max-width: 90%; object-fit: contain; }

/* --- NEU: Service Bar --- */
.service-bar { background: #fff; border-bottom: 2px solid #FFD700; padding: 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.service-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.service-btn { 
    background: #f0f4f8; color: #0B3865; padding: 10px 18px; border-radius: 25px; 
    text-decoration: none; font-weight: bold; font-size: 0.9em; transition: 0.3s; border: 1px solid #d1d9e6;
}
.service-btn:hover { background: #0B3865; color: #fff; transform: translateY(-2px); }

.service-btn.active {
    background: #0B3865;
    color: #ffffff;
    border-color: #0B3865;
}

/* --- Grid System --- */
.container { max-width: 1500px; margin: 30px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 350px); gap: 25px; justify-content: center; }

/* --- Deal Cards --- */
.deal { background: #fff; border-radius: 12px; display: flex; flex-direction: column; width: 350px; height: 350px; text-decoration: none; color: inherit; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.3s; overflow: hidden; border: 1px solid #eee; }
.deal:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.product-container { position: relative; height: 160px; background: #fff; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; }
.product-container img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 15px; }
.discount-badge { position: absolute; top: 10px; right: 10px; background: #e31e24; color: #fff; padding: 4px 8px; border-radius: 6px; font-weight: bold; font-size: 0.9em; }
.deal-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.shop-logo { max-height: 25px; max-width: 110px; object-fit: contain; }
.shop-name { font-weight: bold; color: #0B3865; font-size: 0.9em; }
h2 { font-size: 1.05em; margin: 0; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.deal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.price-tag { font-weight: 800; font-size: 1.2em; color: #0B3865; }
.btn-deal { background: #FFD700; color: #333; padding: 6px 12px; border-radius: 6px; font-size: 0.85em; font-weight: bold; text-transform: uppercase; }

/* --- Footer & Disclaimer --- */
.disclaimer-bar { max-width: 1250px; margin: 40px auto 15px; padding: 0 20px; text-align: center; font-size: 0.75em; color: #777; line-height: 1.4; }
.affiliate-footer { background: #0B3865; color: #ffffff; padding: 40px 20px; text-align: center; border-top: 3px solid #FFD700; }
.footer-small-print { font-size: 0.8em; opacity: 0.8; max-width: 800px; margin: 15px auto; line-height: 1.5; }
.footer-nav { margin-top: 20px; }
.footer-nav a { color: #ffffff; text-decoration: none; font-weight: bold; margin: 0 10px; }
.footer-nav a:hover { color: #FFD700; }

/* --- Mobile --- */
@media (max-width: 1450px) { .container { grid-template-columns: repeat(auto-fill, 350px); } }
@media (max-width: 768px) {
    .container { grid-template-columns: 1fr; padding: 15px; }
    .deal { width: 100%; max-width: 350px; margin: 0 auto; }
    .service-container { padding: 0 10px; }
}