/* ---------------------------------------------------------
   Feinkost Latino Ventura - Custom Brand Colors & Fonts
--------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Kodchasan:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');


/* ---------------------------------------------------------
   FONTS
--------------------------------------------------------- */
body {
    font-family: 'Open Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Kodchasan', sans-serif !important;
}


/* ---------------------------------------------------------
   PRIMARY BUTTONS (Green theme)
--------------------------------------------------------- */
.btn-primary, button.btn-primary {
    background-color: #2ea165 !important;
    border-color: #2ea165 !important;
    color: #ffffff !important;
}
.btn-primary:hover {
    background-color: #5eb135 !important;
    border-color: #5eb135 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LINKS
--------------------------------------------------------- */
a { color: #2ea165 !important; }
a:hover { color: #5eb135 !important; }


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
#header {
    border-bottom: 3px solid #2ea165;
}

/* Cart active background fix */
#header .header-nav .cart-preview.active {
    background: #009196 !important;
}

/* Cart text/icons → stay white */
#header .header-nav .blockcart.active a:hover,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
#footer {
    background-color: #2ea165 !important;
    color: #fff !important;
}

#footer a {
    color: #fff !important;
}

#footer a:hover {
    color: #fdc100 !important;
}

/* TÍTULOS DEL FOOTER - BLANCOS */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer .h1,
#footer .h2,
#footer .h3,
#footer .h4,
#footer .h5,
#footer .h6,
#footer p.h1,
#footer p.h2,
#footer p.h3,
#footer p.h4,
#footer p.h5,
#footer p.h6 {
    color: #ffffff !important;
}

#contact-infos,
#contact-infos * {
    color: #ffffff !important;
}



#block_myaccount_infos .myaccount-title a,
#header a,
#wrapper .breadcrumb li a,
.block-contact .block-contact-title,
.block-contact .navbar-toggler .material-icons,
.linklist .blockcms-title a {
    color: #ffffff;
}

@media (max-width: 767px) {
    .footer-container .links ul {
        margin-bottom: 0;
        background-color: #33e43066;
    }
}


/* ============================================
   SOLUCIÓN: Email duplicado fuera del footer
   Diagnóstico confirmado: Email es hijo directo de BODY
   Fecha: 2025-11-30
   ============================================ */

/* Ocultar email que es hijo directo de body (fuera de footer) */
body > a[href^="mailto:kontakt@feinkostlatinoventura.de"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Backup: Ocultar cualquier email huérfano */
body > a[href*="kontakt"] {
  display: none !important;
}

/* Asegurar que el email del footer (si existe) sea visible */
#footer a[href^="mailto:"],
.footer-container a[href^="mailto:"],
.block-contact a[href^="mailto:"] {
  display: inline !important;
  visibility: visible !important;
  position: relative !important;
  left: auto !important;
}


/* Ensure contact info stays inside block */
.block-contact #contact-infos {
  background: transparent !important;
}

/* ---------------------------------------------------------
   PRICES
--------------------------------------------------------- */
.product-price, .price {
    color: #2ea165 !important;
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   ADD TO CART
--------------------------------------------------------- */
.add-to-cart, .btn.add-to-cart {
    background-color: #5eb135 !important;
    border-color: #5eb135 !important;
}
.add-to-cart:hover {
    background-color: #2ea165 !important;
}


/* ---------------------------------------------------------
   BADGES
--------------------------------------------------------- */
.badge-primary { background-color: #2ea165 !important; }
.badge-success { background-color: #5eb135 !important; }
.badge-warning { background-color: #fdc100 !important; color: #333 !important; }
.badge-danger  { background-color: #e94930 !important; }


/* ---------------------------------------------------------
   PAGINATION
--------------------------------------------------------- */
.pagination .page-item.active .page-link {
    background-color: #2ea165 !important;
    border-color: #2ea165 !important;
}
.pagination .page-link:hover {
    background-color: #5eb135 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */
.form-control:focus,
input:focus {
    border-color: #2ea165 !important;
    box-shadow: 0 0 0 0.2rem rgba(46,161,101,0.25) !important;
}


/* ---------------------------------------------------------
   TABS
--------------------------------------------------------- */
.nav-tabs .nav-link.active {
    border-bottom-color: #2ea165 !important;
    color: #2ea165 !important;
}


/* ---------------------------------------------------------
   DROPDOWNS Y SELECTS
--------------------------------------------------------- */
.dropdown-menu {
    background-color: #ffffff !important;
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
    color: #333333 !important;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: #2ea165 !important;
    color: #ffffff !important;
}

select.form-control,
select.form-control option {
    color: #333333 !important;
    background-color: #ffffff !important;
}


/* ---------------------------------------------------------
   REDES SOCIALES - SOLO CAMBIAR COLORES DE FONDO
--------------------------------------------------------- */

/* Círculos */
.block-social ul li {
    border-radius: 50% !important;
}

.block-social a {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 40px !important;
}

/* Texto blancos */
.block-social a {
    color: #ffffff !important;
}

/* Colores de fondo (manteniendo los iconos SVG) */
.block-social ul li.facebook {
    background-color: #3b5998 !important;
}

.block-social ul li.instagram {
    background-color: #e4405f !important;
}

.block-social ul li.twitter {
    background-color: #000000 !important;
}

.block-social ul li.youtube {
    background-color: #ff0000 !important;
}

/* Hover */
.block-social a:hover {
    opacity: 0.8 !important;
}


/* ---------------------------------------------------------
   FOOTER - ESCONDER LINK PRESTASHOP
--------------------------------------------------------- */
#footer a[href*="prestashop-project.org"] {
    display: none !important;
}


/* ---------------------------------------------------------
   OCULTAR CATEGORÍAS EN HEADER (desktop y tablets)
--------------------------------------------------------- */
@media (min-width: 768px) {
    #_desktop_top_menu {
        display: none !important;
    }
}


/* ---------------------------------------------------------
   LOGO GRANDE EN MÓVILES
--------------------------------------------------------- */
@media (max-width: 767px) {
    /* Header móvil más alto para acomodar el logo grande */
    .header-nav,
    .header-nav .mobile {
        min-height: 100px !important;
        padding: 10px 0 30px 0 !important;
    }

    /* Asegurar que el contenedor del header tenga espacio */
    #header .header-nav {
        padding-bottom: 30px !important;
        margin-bottom: 15px !important;
    }

    #_mobile_logo {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px !important;
    }

    #_mobile_logo a {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #_mobile_logo img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }
}


/* ---------------------------------------------------------
   SLIDER - FIX CUTTING AT 1200PX+
--------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Fix parent containers that might be cutting the slider */
    #wrapper,
    #content-wrapper,
    .container,
    .row {
        overflow: visible !important;
    }

    /* Override float and fix overflow that cuts images */
    .homeslider-container,
    #carousel,
    .homeslider,
    .carousel-inner,
    .carousel-item,
    .carousel-item figure {
        float: none !important;
        margin: 0 auto !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        text-align: center !important;
    }

    /* Remove any height constraints */
    .homeslider-container {
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Center and prevent cutting */
    .homeslider {
        display: block !important;
    }

    /* Images - maintain full aspect ratio */
    .homeslider img,
    #carousel img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 auto !important;
    }
}


/* ---------------------------------------------------------
   CATEGORY HEADER - HIDE EMPTY DESCRIPTION BLOCKS
--------------------------------------------------------- */

/* NUCLEAR OPTION: Hide the entire block-category that appears at the top */
#content-wrapper > .block-category,
#js-product-list-header ~ .block-category,
.block-category.card.card-block:first-of-type {
    display: none !important;
}

/* Keep the h1 visible but hide the empty description */
#js-product-list-header .block-category-inner,
.block-category-inner {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Hide ALL subcategory images (they're all empty) */
.subcategory-image,
.subcategories-list .subcategory-image {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* HIDE SUBCATEGORIES IN ALL DEVICES (desktop + mobile) */
#subcategories,
#subcategories.card,
#subcategories.card-block,
#subcategories.card.card-block,
div#subcategories,
.subcategories,
.subcategories-list,
.subcategory-heading {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}


/* ---------------------------------------------------------
   MOBILE - HIDE CATEGORY LISTINGS (Keep in hamburger menu only)
--------------------------------------------------------- */
@media (max-width: 991px) {
    #left-column .block-categories,
    .block-categories-tree,
    #category .block-categories {
        display: none !important;
    }

    .category-top-menu,
    #category-top-menu {
        display: none !important;
    }

    #subcategories,
    #subcategories.card,
    #subcategories.card-block,
    #subcategories.card.card-block,
    div#subcategories,
    .subcategories,
    .subcategories-list,
    .subcategory-heading,
    #index .subcategories,
    .featured-products .subcategories,
    .category-sub-menu,
    #content .subcategories,
    #content-wrapper .subcategories {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    #menu-icon {
        display: block !important;
        position: relative !important;
        z-index: 9999 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    #mobile_top_menu_wrapper {
        position: relative !important;
        z-index: 9998 !important;
    }
}

/* ---------------------------------------------------------
   GREEN WEB BADGE - PrestaShop Custom Text Module
--------------------------------------------------------- */
#custom-text {
    background-color: transparent !important;
    background: transparent !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

#custom-text p {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#custom-text img {
    max-width: 200px !important;
    height: auto !important;
    display: inline-block !important;
    transition: opacity 0.3s ease !important;
}

#custom-text a {
    display: inline-block !important;
    text-decoration: none !important;
}

#custom-text img:hover {
    opacity: 0.85 !important;
}

/* Mobile optimization */
@media (max-width: 767px) {
    #custom-text img {
        max-width: 150px !important;
    }
    
    #custom-text {
        padding: 15px 0 !important;
    }
}

/* ============================================
   SOLUCIÓN: Eliminar scrollbar horizontal (3px overflow)
   Diagnóstico: HTML/BODY/MAIN/HEADER/#carousel causan 3px de exceso
   Fecha: 2025-11-27
   ============================================ */

/* Forzar HTML y BODY a no mostrar overflow horizontal */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Asegurar que main no se salga */
main {
  overflow-x: hidden;
  max-width: 100%;
}

/* Header ajustado */
#header {
  overflow-x: hidden;
  max-width: 100%;
}

/* Carrusel específico (uno de los causantes del overflow) */
#carousel.carousel {
  overflow-x: hidden;
  max-width: 100%;
}

/* Ajustar elementos del carrusel */
.carousel-inner,
.carousel-item {
  max-width: 100%;
  overflow-x: hidden;
}

/* Asegurar que todos los contenedores respeten el ancho */
.container,
.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevenir que las filas se salgan */
.row {
  max-width: 100%;
}

/* ============================================
   FIN - Scrollbar horizontal
   ============================================ */
/* ============================================
   FIX: Anchos uniformes en footer (MOBILE)
   Verificado en consola - funciona ✅
   Desktop no requiere cambios
   ============================================ */

@media (max-width: 767px) {
  /* Quitar padding del parent que contiene row anidado */
  #footer .col-md-6.links {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Row anidado: 100% sin márgenes */
  #footer .col-md-6.links > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Wrappers: 100% width para que se apilen verticalmente */
  #footer .col-md-6.wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   FIX: Centrado en móvil
   ============================================ */

@media (max-width: 767px) {
  /* Centrar productos */
  #products,
  .products,
  .featured-products {
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Centrar green hosting logo */
  #footer p.text-sm-center {
    text-align: center !important;
  }
}

/* ============================================
   FIX: Eliminar barra gris del slider
   Problema: padding-bottom + altura incorrecta
   ============================================ */

#carousel,
.homeslider,
.carousel {
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.carousel-inner {
  height: auto !important;
}

/* Asegurar que imágenes se ajusten bien */
.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   FIX FINAL: Mobile centering + Slider
   ============================================ */

@media (max-width: 767px) {
  /* Centrar productos en mobile */
  #products .row,
  .products .row,
  .featured-products .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Slider: quitar padding que causa barra gris */
  #carousel,
  .homeslider,
  .carousel {
    padding-bottom: 0 !important;
  }
}

/* Green hosting centrado (ya funciona) */
#footer p.text-sm-center {
  text-align: center !important;
}
/* Safari iOS: Ocultar fondo gris del slider */
#carousel,
.homeslider,
.carousel {
  background-color: transparent !important;
  background: transparent !important;
  overflow: hidden !important;
}

.carousel-inner {
  background-color: transparent !important;
}

/* ============================================
   Slider: Controles SUTILES y casi invisibles
   ============================================ */

@media (max-width: 767px) {
  /* Quitar fondos y rectángulos */
  .carousel-control.left,
  .carousel-control.right {
    background: none !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 0.3 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Iconos de flechas - muy sutiles */
  .carousel-control .material-icons,
  .carousel-control i {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Contenedor de puntos - sin fondo */
  .carousel-indicators {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 5px !important;
    margin-bottom: 8px !important;
    opacity: 1 !important;
  }
  
  /* Puntitos - MUY pequeños y casi invisibles */
  .carousel-indicators li {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
    opacity: 0.4 !important;
    margin: 0 3px !important;
  }
  
  /* Punto activo - apenas más visible */
  .carousel-indicators li.active {
    background: rgba(255, 255, 255, 0.7) !important;
    opacity: 0.7 !important;
    width: 8px !important;
    height: 8px !important;
  }
}