/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #F8F3EF; color: #3F3040; }

/* ============ ANNOUNCEMENT BAR ============ */
.announcement-bar { background: #3F3040; color: #F8F3EF; text-align: center; padding: 10px 15px; font-size: 13px; letter-spacing: 0.5px; }
.announcement-bar span { color: #C9A45C; font-weight: 600; }

/* ============ HEADER ============ */
.header { background: #FFFFFF; padding: 15px 0; border-bottom: 1px solid #F8F3EF; box-shadow: 0 2px 15px rgba(63, 48, 64, 0.04); }
.header .logo { display: flex; align-items: center; text-decoration: none; }
.header .logo img { height: 90px; width: auto; border-radius: 8px; }
.search-bar { display: flex; border: 1px solid #E8DFD5; border-radius: 25px; overflow: hidden; width: 100%; max-width: 400px; background: #F8F3EF; transition: all 0.3s; }
.search-bar:focus-within { border-color: #8B6688; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(139, 102, 136, 0.08); }
.search-bar input { border: none; padding: 12px 20px; width: 100%; outline: none; font-size: 14px; color: #3F3040; background: transparent; }
.search-bar input::placeholder { color: #B9A0C0; }
.search-bar button { background: #8B6688; border: none; color: white; padding: 12px 22px; cursor: pointer; transition: all 0.3s; }
.search-bar button:hover { background: #6E4F6B; }
.header-icons { display: flex; gap: 22px; align-items: center; }
.header-icon { color: #3F3040; font-size: 22px; text-decoration: none; position: relative; transition: color 0.3s; }
.header-icon:hover { color: #8B6688; }
.header-icon .badge { position: absolute; top: -6px; right: -8px; background: #C9A45C; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* ============ CATEGORY NAVIGATION ============ */
.category-nav { background: #FFFFFF; border-bottom: 1px solid #F8F3EF; padding: 15px 0; }
.category-nav a { color: #3F3040; text-decoration: none; font-weight: 500; font-size: 13px; margin: 0 18px; transition: all 0.3s; letter-spacing: 1.5px; text-transform: uppercase; position: relative; }
.category-nav a::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #C9A45C; transition: width 0.3s; }
.category-nav a:hover { color: #8B6688; }
.category-nav a:hover::after { width: 100%; }

/* ============ FOOTER ============ */
.footer { background: #3F3040; color: #F8F3EF; padding: 60px 0 20px; margin-top: 60px; }
.footer h5 { color: #C9A45C; margin-bottom: 20px; font-weight: 600; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.footer a { color: #F8F3EF; text-decoration: none; display: block; margin-bottom: 12px; font-size: 13px; transition: all 0.3s; opacity: 0.85; }
.footer a:hover { color: #C9A45C; padding-left: 5px; opacity: 1; }
.footer-bottom { text-align: center; margin-top: 40px; padding-top: 25px; border-top: 1px solid rgba(201, 164, 92, 0.2); color: #B9A0C0; font-size: 12px; letter-spacing: 0.5px; }

/* ============ NEWSLETTER ============ */
.newsletter-section { background: rgba(201, 164, 92, 0.08); padding: 40px 0; border-radius: 15px; margin: 30px 0; border: 1px solid rgba(201, 164, 92, 0.25); }
.newsletter-section h4 { color: #C9A45C; font-weight: 600; margin-bottom: 12px; letter-spacing: 1px; }
.newsletter-section p { color: #F8F3EF; font-size: 14px; margin-bottom: 20px; opacity: 0.9; }
.newsletter-form { display: flex; max-width: 500px; margin: 0 auto; border: 1px solid #C9A45C; border-radius: 30px; overflow: hidden; background: #FFFFFF; }
.newsletter-form input { flex: 1; border: none; padding: 14px 22px; font-size: 14px; outline: none; color: #3F3040; background: transparent; }
.newsletter-form input::placeholder { color: #B9A0C0; }
.newsletter-form button { background: #C9A45C; color: white; border: none; padding: 14px 30px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s; letter-spacing: 1px; text-transform: uppercase; }
.newsletter-form button:hover { background: #B08F4A; }

/* ============ PAYMENT ICONS ============ */
.payment-icons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.payment-icon { background: rgba(255, 255, 255, 0.08); padding: 8px 15px; border-radius: 8px; font-size: 12px; color: #F8F3EF; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(201, 164, 92, 0.25); }
.payment-icon i { font-size: 15px; color: #C9A45C; }

/* ============ MOBILE NAVIGATION ============ */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; box-shadow: 0 -2px 15px rgba(63, 48, 64, 0.1); z-index: 1000; padding: 10px 0; border-top: 1px solid #F8F3EF; }
.mobile-nav a { color: #B9A0C0; text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: 10px; transition: color 0.3s; letter-spacing: 0.5px; }
.mobile-nav a.active { color: #8B6688; }
.mobile-nav a i { font-size: 20px; margin-bottom: 4px; }

/* ============ WHATSAPP BUTTON ============ */
.whatsapp-btn { position: fixed; bottom: 90px; right: 20px; width: 55px; height: 55px; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35); z-index: 999; text-decoration: none; transition: all 0.3s; }
.whatsapp-btn:hover { transform: scale(1.1); color: white; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5); }

/* ============ BACK TO TOP ============ */
.back-to-top { position: fixed; bottom: 20px; right: 20px; width: 45px; height: 45px; background: #3F3040; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 5px 20px rgba(63, 48, 64, 0.3); z-index: 999; text-decoration: none; transition: all 0.3s; cursor: pointer; border: none; opacity: 0; visibility: hidden; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: #8B6688; transform: translateY(-3px); }

/* ============ PREMIUM CART NOTIFICATION ============ */
.cart-notification-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(63, 48, 64, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.cart-notification-overlay.show { opacity: 1; pointer-events: auto; }
.cart-notification {
    background: #F8F3EF;
    border: 1px solid #C9A45C;
    padding: 45px 40px 35px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 80px rgba(63, 48, 64, 0.5), 0 0 0 1px rgba(201, 164, 92, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-notification-overlay.show .cart-notification { transform: scale(1) translateY(0); }
.cart-notification::before, .cart-notification::after { content: ''; position: absolute; width: 25px; height: 25px; border: 1px solid #C9A45C; }
.cart-notification::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.cart-notification::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.cart-notification-close { position: absolute; top: 15px; right: 15px; background: transparent; border: 1px solid rgba(139, 102, 136, 0.4); color: #8B6688; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: all 0.3s; }
.cart-notification-close:hover { background: #8B6688; color: #F8F3EF; transform: rotate(90deg); }
.cart-notification-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #8B6688 0%, #3F3040 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #C9A45C; font-size: 32px; animation: checkPop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s both; }
@keyframes checkPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.cart-notification-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; color: #3F3040; letter-spacing: 1px; margin-bottom: 8px; }
.cart-notification-subtitle { font-size: 12px; color: #8B6688; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 25px; }
.cart-notification-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cart-notification-btn { padding: 12px 22px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; border: 1px solid; min-width: 130px; justify-content: center; }
.cart-notification-btn-outline { background: transparent; color: #8B6688; border-color: #8B6688; }
.cart-notification-btn-outline:hover { background: #8B6688; color: white; }
.cart-notification-btn-solid { background: #8B6688; color: white; border-color: #8B6688; }
.cart-notification-btn-solid:hover { background: #3F3040; border-color: #3F3040; transform: translateY(-2px); }

/* ============ PREMIUM REMOVE CONFIRMATION ============ */
.remove-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(63, 48, 64, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.remove-confirm-overlay.show { opacity: 1; pointer-events: auto; }
.remove-confirm-box { background: #F8F3EF; border: 1px solid #C9A45C; padding: 40px 35px 30px; max-width: 400px; width: 100%; text-align: center; position: relative; box-shadow: 0 30px 80px rgba(63, 48, 64, 0.5), 0 0 0 1px rgba(201, 164, 92, 0.3); transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.remove-confirm-overlay.show .remove-confirm-box { transform: scale(1) translateY(0); }
.remove-confirm-box::before, .remove-confirm-box::after { content: ''; position: absolute; width: 25px; height: 25px; border: 1px solid #C9A45C; }
.remove-confirm-box::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.remove-confirm-box::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.remove-confirm-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #C2185B 0%, #8B1538 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: white; font-size: 26px; }
.remove-confirm-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; color: #3F3040; letter-spacing: 1px; margin-bottom: 10px; }
.remove-confirm-text { font-size: 13px; color: #8B6688; line-height: 1.6; margin-bottom: 25px; }
.remove-confirm-text strong { color: #3F3040; }
.remove-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.remove-confirm-btn { padding: 12px 25px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; border: 1px solid; min-width: 120px; }
.remove-confirm-cancel { background: transparent; color: #8B6688; border-color: #E8DFD5; }
.remove-confirm-cancel:hover { border-color: #8B6688; background: #F8F3EF; }
.remove-confirm-delete { background: #C2185B; color: white; border-color: #C2185B; }
.remove-confirm-delete:hover { background: #8B1538; border-color: #8B1538; }

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 768px) {
    .mobile-nav { display: flex; justify-content: space-around; }
    body { padding-bottom: 65px; }
    .search-bar { display: none; }
    .header .logo img { height: 60px; }
    .footer { margin-bottom: 65px; }
    .whatsapp-btn { bottom: 130px; width: 50px; height: 50px; font-size: 24px; }
    .back-to-top { bottom: 75px; }
    .newsletter-form { flex-direction: column; border-radius: 15px; margin: 0 15px; }
    .newsletter-form button { border-radius: 0; }
    .category-nav a { font-size: 11px; margin: 0 10px; letter-spacing: 1px; }
    
    .cart-notification { padding: 35px 25px 25px; }
    .cart-notification-icon { width: 55px; height: 55px; font-size: 26px; margin-bottom: 18px; }
    .cart-notification-title { font-size: 16px; }
    .cart-notification-subtitle { font-size: 10px; margin-bottom: 20px; }
    .cart-notification-actions { flex-direction: column; }
    .cart-notification-btn { width: 100%; }
    
    .remove-confirm-box { padding: 30px 22px 25px; }
    .remove-confirm-icon { width: 50px; height: 50px; font-size: 22px; margin-bottom: 15px; }
    .remove-confirm-title { font-size: 17px; }
    .remove-confirm-text { font-size: 12px; margin-bottom: 20px; }
    .remove-confirm-actions { flex-direction: column; }
    .remove-confirm-btn { width: 100%; }
}