/* === 1. IMPORTAR FUENTES === */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* === 2. PALETA DE COLORES === */
:root {
    --semper-gold: #C9A03D;
    --semper-gold-light: #D4AF37;
    --semper-dark: #0D0D0D;
    --semper-gray: #1A1A1A;
    --semper-red: #B22222;
    --semper-white: #FFFFFF;
    --semper-black: #000000;
}

/* === 3. FONDO GENERAL BLANCO === */
body {
    background-color: #FFFFFF !important;
    color: #333333 !important;
}

/* ============================================
   HEADER - LOGO CENTRADO ARRIBA
   ============================================ */

/* Contenedor del logo centrado */
.header-logo-center {
    padding: 30px 0 20px !important;
    background-color: #FFFFFF !important;
    text-align: center !important;
}

.header-logo-img {
    max-height: 80px !important;
    width: auto !important;
    margin: 0 auto !important;
}

.header-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 2rem !important;
    letter-spacing: 8px !important;
    color: #0D0D0D !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
}

/* Logo nativo de PrestaShop (por si acaso) */
#header .logo,
header .logo {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

#header .logo img,
header .logo img {
    max-height: 80px !important;
    width: auto !important;
}

/* ============================================
   HEADER - BARRA INFERIOR NEGRA
   ============================================ */

.header-bottom-bar {
    background-color: #0D0D0D !important;
    padding: 12px 0 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
}

.header-bottom-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
}

/* ============================================
   Carrusel
   ============================================ */

.carousel-control-next, .carousel-control-prev {
    align-items: center;
    background: none;
    border: 0;
    bottom: 0;
    color: #000;
    display: none;
    justify-content: center;
    opacity: .35;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity .15s ease;
    width: 15%;
    z-index: 1;
}


/* === MENÚ PRINCIPAL === */
.header-menu .top-menu {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-menu .top-menu li {
    list-style: none !important;
}

.header-menu .top-menu a {
    color: #C9A03D !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
    padding: 5px 0 !important;
    transition: all 0.3s ease !important;
}

.header-menu .top-menu a:hover {
    color: #C9A03D !important;
}

/* === BUSCADOR === */
.ps-searchbar__clear, .ps-searchbar__magnifier {
    color: #C9A03D;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/* === CONTACTO === */
.header-contact a {
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.header-contact a:hover {
    color: #C9A03D !important;
}

.header-contact .material-icons {
    font-size: 18px !important;
}

/* === MI CUENTA === */
.header-account a {
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.header-account a:hover {
    color: #C9A03D !important;
}

.header-account .material-icons {
    font-size: 18px !important;
}

/* === CARRITO === */
.header-block__badge {
        background: var(--bs-tertiary-bg);
        color: #C9A03D;
        font-size: 1rem;
        height: 1.5rem;
        min-width: 1.5rem;
        position: static;
    }

/* === Nuevo === */
.product-flag.new, .badge new, .product-flags .new {
    background-color: var(--semper-gold) !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    font-size: 12px !important;
}

.product-flags .badge.discount, .product-flags .badge:not(.discount) {
    border: 1px solid #C9A03D ;
    background-color: #C9A03D !important;
    color: #fff !important;
}

.product-flags .badge:not(.discount), .text-bg-primary {

background-color: #C9A03D !important;
color: #fff!important;

}

/* === Producto === */
.page-product .product__thumbnail.active .product__thumbnail-image {
    outline: .125rem solid #C9A03D ;
    outline-offset: -.125rem;
}

/* === Desplegable ordenar por === */
.btn-outline-tertiary {
    --bs-btn-font-weight: 400;
    --bs-btn-color: #C9A03D;
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #C9A03D;
    --bs-btn-hover-bg: var(--bs-body-bg);
    --bs-btn-hover-border-color: #C9A03D;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #C9A03D;
    --bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-active-border-color: #C9A03D;
}


/* === Descripción Producto === */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
    color: #C9A03D;
}


.product-flags .badge.discount, .product-flags .badge:not(.discount) {
    border: 1px solid var #C9A03D ;
}

.product-flags .badge:not(.discount), .text-bg-primary {
    background-color: #C9A03D !important;
    color: #fff !important;
}

/* === Detalles del Producto === */
.accordion-button {
    align-items: center;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    color: #C9A03D ;
    display: flex;
    font-size: 1rem;
    overflow-anchor: none;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    position: relative;
    text-align: left;
    transition: var(--bs-accordion-transition);
    width: 100%;
}

/* ============================================
   TÍTULOS
   ============================================ */

h1, .page-title {
    color: var(--semper-dark) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 2.5rem !important;
    letter-spacing: 5px !important;
    font-weight: 700 !important;
}

h2 {
    color: var(--semper-dark) !important;
    text-transform: uppercase !important;
}


/* ============================================
  Botones
   ============================================ */
.btn-primary {
	--bs-btn-color: #000000;
    --bs-btn-bg: #C9A03D;
    --bs-btn-border-color: #C9A03D;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #C9A03D;
    --bs-btn-active-color: #C9A03D;
}

.btn-outline-primary {
    --bs-btn-border-color: #C9A03D;
    --bs-btn-hover-color: #C9A03D;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #C9A03D;
    --bs-btn-active-color: #C9A03D;
}

/* Boton carrusell */
.ps-imageslider__figcaption {
    -webkit-backdrop-filter: blur(00px);
    backdrop-filter: blur(0px);
    background-color: transparent;
    border-radius: var(--bs-border-radius);
    color: var(--bs-light);
}


/* ============================================
   BOTONES + Y - Producto
   ============================================ */

/* Contenedor principal */
.product__actions-qty-add.product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Contenedor interno de los botones */
.product__actions-qty-add.product-quantity .qty,
.product__actions-qty-add.product-quantity .input-group,
.product__actions-qty-add.product-quantity > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
}

/* Botón menos (-) */
.product__actions-qty-add.product-quantity .qty_minus,
.product__actions-qty-add.product-quantity .btn-touchspin:first-child button,
.product__actions-qty-add.product-quantity .input-group-btn:first-child button {
    width: 36px !important;
    height: 36px !important;
    background-color: #E0E0E0 !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Input del número */
.product__actions-qty-add.product-quantity .quantity_wanted,
.product__actions-qty-add.product-quantity input[name="qty"],
.product__actions-qty-add.product-quantity .form-control {
    width: 50px !important;
    height: 36px !important;
    text-align: center !important;
    border: 1px solid #CCCCCC !important;
    border-left: none !important;
    border-right: none !important;
    background-color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Botón más (+) */
.product__actions-qty-add.product-quantity .qty_plus,
.product__actions-qty-add.product-quantity .btn-touchspin:last-child button,
.product__actions-qty-add.product-quantity .input-group-btn:last-child button {
    width: 36px !important;
    height: 36px !important;
    background-color: #E0E0E0 !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover de los botones */
.product__actions-qty-add.product-quantity .qty_minus:hover,
.product__actions-qty-add.product-quantity .btn-touchspin:first-child button:hover {
    background-color: #C9A03D !important;
    border-color: #C9A03D !important;
    color: #0D0D0D !important;
}

.product__actions-qty-add.product-quantity .qty_plus:hover,
.product__actions-qty-add.product-quantity .btn-touchspin:last-child button:hover {
    background-color: #C9A03D !important;
    border-color: #C9A03D !important;
    color: #0D0D0D !important;
}

/* Botón "Añadir al carrito" */
.product__actions-qty-add.product-quantity .add-to-cart {
    margin-left: 0 !important;
}

.product__actions-qty-add.product-quantity .btn-primary {
    background-color: #0D0D0D !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

.product__actions-qty-add.product-quantity .btn-primary:hover {
    background-color: #C9A03D !important;
    color: #0D0D0D !important;
}



/* ============================================
   BOTONES + Y - EN HORIZONTAL
   ============================================ */

/* Contenedor de cantidad + botón comprar */
.product-actions .product-add-to-cart,
.product-miniature .product-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Contenedor de los botones + y - */
.product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Botón menos (-) */
.product-quantity .qty_minus,
.product-quantity .btn-touchspin:first-child {
    width: 32px !important;
    height: 32px !important;
    background-color: #E0E0E0 !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Input del número */
.product-quantity .quantity_wanted,
.product-quantity input[name="qty"] {
    width: 45px !important;
    height: 32px !important;
    text-align: center !important;
    border: 1px solid #CCCCCC !important;
    border-left: none !important;
    border-right: none !important;
    background-color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botón más (+) */
.product-quantity .qty_plus,
.product-quantity .btn-touchspin:last-child {
    width: 32px !important;
    height: 32px !important;
    background-color: #E0E0E0 !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover de los botones */
.product-quantity .qty_minus:hover,
.product-quantity .btn-touchspin:first-child:hover,
.product-quantity .qty_plus:hover,
.product-quantity .btn-touchspin:last-child:hover {
    background-color: #C9A03D !important;
    border-color: #C9A03D !important;
    color: #0D0D0D !important;
}

/* === BOTÓN COMPRAR PEQUEÑO === */
.product-actions .btn-primary,
.product-actions .add-to-cart button,
.product-miniature .btn-primary {
    width: auto !important;
    min-width: 120px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    background-color: #0D0D0D !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.product-actions .btn-primary:hover,
.product-actions .add-to-cart button:hover,
.product-miniature .btn-primary:hover {
    background-color: #C9A03D !important;
    color: #0D0D0D !important;
}

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

footer {
    background-color: #333333 !important;
    margin-top: 50px !important;
    padding: 40px 0 20px !important;
}

.footer__main {
    background: #333333 ;
}

footer .footer-block__title,
footer h3 {
    color: #C9A03D !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

footer .footer-block__list a,
footer ul li a {
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 0 !important;
    transition: all 0.3s ease !important;
}

footer .footer-block__list a:hover,
footer ul li a:hover {
    color: #C9A03D !important;
}

footer ul {
    list-style: none !important;
    padding-left: 0 !important;
}

/* === LOGO FOOTER DERECHA === */
/* Contenedor del logo - lo alineamos a la derecha */
.footer-logo {
    text-align: right !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* La imagen del logo */
.footer-right-logo {
    max-height: 100% !important;
    width: 100% !important;
    display: inline-block !important;
}

footer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

footer .col-md-3:last-child,
footer .col-lg-3:last-child {
    text-align: right !important;
}


/* === COPYRIGHT === */
.copyright {
    border-top: 1px solid #333 !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    color: #C9A03D !important;
}

/* ============================================
   ENLACES GENERALES
   ============================================ */

a {
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: #C9A03D !important;
}

.nav-link:hover {
    color: #C9A03D !important;
}

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

@media (max-width: 768px) {
    /* Header responsive */
    .header-bottom-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .header-menu .top-menu {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .header-search .ps-searchbar__input {
        width: 100% !important;
    }
    
    .header-logo-img {
        max-height: 50px !important;
    }
    
    .header-title {
        font-size: 1.3rem !important;
        letter-spacing: 4px !important;
    }
    
    /* Títulos responsive */
    h1, .page-title {
        font-size: 1.8rem !important;
    }
    
    /* Botones responsive */
    .product-quantity {
        justify-content: center !important;
    }
    
    .product-actions .product-add-to-cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .product-actions .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Footer responsive */
    .footer-logo {
        text-align: center !important;
        margin-top: 20px !important;
    }
}