/* ============================================
   YELLOW REPOSTERÍA CREATIVA - CUSTOM STYLES
   Paleta de colores del nuevo branding
   ============================================ */

:root {
    /* Colores principales del logo */
    --yellow-primary: #FDB913;      /* Amarillo principal */
    --yellow-dark: #E5A410;         /* Amarillo oscuro */
    --purple-primary: #9B4F96;      /* Púrpura */
    --purple-light: #B565B0;        /* Púrpura claro */
    --blue-primary: #2C4B7C;        /* Azul del logo */
    --blue-dark: #1E3557;           /* Azul oscuro */
    --pink-accent: #E76F7A;         /* Rosa del botón "INICIO" */
    
    /* Colores de soporte */
    --white: #FFFFFF;
    --gray-light: #F5F5F5;
    --gray-medium: #666666;
    --gray-dark: #333333;
}

/* ============================================
   LOGO ADJUSTMENTS
   ============================================ */

.header_logo {
    display: flex;
    align-items: center;
}

.header_logo a img {
    max-width: 400px !important;
    max-height: 155px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Para dispositivos móviles */
@media (max-width: 767px) {
    .header_logo a img {
        max-width: 220px !important;
        max-height: 85px !important;
    }
}

/* Para tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .header_logo a img {
        max-width: 270px !important;
        max-height: 100px !important;
    }
}

/* ============================================
   HEADER STYLES
   ============================================ */

/* Header top background - Mantener estilos originales */
.header_top .welcome_text p {
    font-weight: 500;
}

/* Dropdown account menu */
.dropdown_account_link li a:hover {
    background: var(--yellow-primary) !important;
    color: var(--blue-primary) !important;
}

/* ============================================
   NAVIGATION MENU
   ============================================ */

.main_menu nav > ul > li > a {
    color: var(--gray-dark) !important;
    font-weight: 500;
}

.main_menu nav > ul > li > a:hover,
.main_menu nav > ul > li > a.active {
    color: var(--yellow-primary) !important;
}

/* Dropdown menu hover */
.bucker-dropdown li a:hover {
    background: var(--yellow-primary) !important;
    color: var(--blue-primary) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
.button {
    background: var(--pink-accent) !important;
    border-color: var(--pink-accent) !important;
    color: var(--white) !important;
}

.btn-primary:hover,
.button:hover {
    background: var(--purple-primary) !important;
    border-color: var(--purple-primary) !important;
    color: var(--white) !important;
}

/* Secondary buttons (amarillo) */
.btn-yellow,
.button-yellow {
    background: var(--yellow-primary) !important;
    border-color: var(--yellow-primary) !important;
    color: var(--blue-primary) !important;
    font-weight: 600;
}

.btn-yellow:hover,
.button-yellow:hover {
    background: var(--yellow-dark) !important;
    border-color: var(--yellow-dark) !important;
    color: var(--blue-primary) !important;
}

/* ============================================
   CART & WISHLIST ICONS
   ============================================ */

.header_account ul li a i {
    color: var(--gray-dark) !important;
}

.header_account ul li a:hover i {
    color: var(--yellow-primary) !important;
}

.cart_count,
.wishlist_count {
    background: var(--pink-accent) !important;
    color: var(--white) !important;
}

/* ============================================
   LINKS & ACCENTS
   ============================================ */

a {
    color: var(--purple-primary);
}

a:hover {
    color: var(--yellow-primary);
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

.product_badge.new {
    background: var(--yellow-primary) !important;
    color: var(--blue-primary) !important;
}

.product_badge.sale {
    background: var(--pink-accent) !important;
    color: var(--white) !important;
}

.product_name a:hover {
    color: var(--yellow-primary) !important;
}

.price_box .current_price {
    color: var(--purple-primary) !important;
    font-weight: 700;
}

.price_box .old_price {
    color: var(--gray-medium) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer_top {
    background: var(--blue-primary) !important;
}

.footer_top h3,
.footer_top h4 {
    color: var(--yellow-primary) !important;
}

.footer_top p,
.footer_top li,
.footer_top a {
    color: var(--white) !important;
}

.footer_top a:hover {
    color: var(--yellow-primary) !important;
}

.footer_bottom {
    background: var(--blue-dark) !important;
}

.footer_bottom p,
.footer_bottom a {
    color: var(--white) !important;
}

.footer_bottom a:hover {
    color: var(--yellow-primary) !important;
}

/* ============================================
   SLIDER & HERO SECTIONS
   ============================================ */

.slider_content h1,
.slider_content h2 {
    color: var(--blue-primary) !important;
}

.slider_content h1 span,
.slider_content h2 span {
    color: var(--yellow-primary) !important;
}

.slider_button a {
    background: var(--pink-accent) !important;
    border-color: var(--pink-accent) !important;
}

.slider_button a:hover {
    background: var(--purple-primary) !important;
    border-color: var(--purple-primary) !important;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section_title h2 {
    color: var(--blue-primary) !important;
}

.section_title h2 span {
    color: var(--yellow-primary) !important;
}

/* ============================================
   FORMS
   ============================================ */

.form-control:focus {
    border-color: var(--yellow-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(253, 185, 19, 0.25) !important;
}

input[type="submit"],
button[type="submit"] {
    background: var(--pink-accent) !important;
    border-color: var(--pink-accent) !important;
    color: var(--white) !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--purple-primary) !important;
    border-color: var(--purple-primary) !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.offcanvas_menu {
    background: var(--white) !important;
}

.offcanvas_main_menu li a {
    color: var(--gray-dark) !important;
}

.offcanvas_main_menu li a:hover {
    color: var(--yellow-primary) !important;
}

.canvas_close a {
    color: var(--pink-accent) !important;
}

.canvas_close a:hover {
    color: var(--purple-primary) !important;
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

a, button, .btn, .button {
    transition: all 0.3s ease-in-out;
}

/* ============================================
   UTILITIES
   ============================================ */

.bg-yellow {
    background-color: var(--yellow-primary) !important;
}

.bg-purple {
    background-color: var(--purple-primary) !important;
}

.bg-blue {
    background-color: var(--blue-primary) !important;
}

.bg-pink {
    background-color: var(--pink-accent) !important;
}

.text-yellow {
    color: var(--yellow-primary) !important;
}

.text-purple {
    color: var(--purple-primary) !important;
}

.text-blue {
    color: var(--blue-primary) !important;
}

.text-pink {
    color: var(--pink-accent) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
    .header_top_inner {
        flex-direction: column !important;
        text-align: center;
    }
    
    .header_top_sidebar ul {
        flex-direction: column !important;
        gap: 10px;
    }
}

/* ── Dropdown Cuenta: iconos ── */
.dropdown_account_link li a i {
    display: inline-block;
    width: 18px;
    margin-right: 7px;
    font-size: 14px;
    color: #fc7c7c;
    vertical-align: middle;
    text-align: center;
}
.dropdown_account_link li a:hover i {
    color: #fc7c7c;
}