/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront es el tema perfecto para tu próximo proyecto WooCommerce.
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
Version: 4.6.0.1737281371
Updated: 2025-09-20
*/

/* === Ocultar versión móvil en escritorio === */
.mobile-header,
.handheld-navigation {
  display: none;
}

/* === Mostrar versión escritorio por defecto === */
.desktop-header {
  display: block;
}

/* === Ocultar iconos personalizados en escritorio === */
.custom-header-icons {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* === Estilos solo para móviles === */
@media (max-width: 768px) {

  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
    width: 100%;
  }

  .desktop-header,
  .storefront-primary-navigation,
  .site-header .site-navigation,
  .site-header .site-search,
  .site-header .site-header-cart {
    display: none !important;
  }

  .header-left,
  .header-center,
  .header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .header-left {
    justify-content: flex-start;
  }

  .header-center {
    flex-grow: 1;
    justify-content: center;
  }

  .header-right {
    justify-content: flex-end;
  }

  .menu-toggle,
  .menu-toggle:focus,
  .menu-toggle:active {
    font-size: 20px;
    background: none !important;
    border: none !important;
    color: #333;
    padding: 10px;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
  }

  .site-branding {
    text-align: center;
  }

  .site-branding img,
  .custom-logo {
    max-width: 150px !important;
    width: 150px !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }

  .custom-header-icons {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: static !important;
    z-index: 1000;
    align-items: center;
    gap: 10px;
  }

  .user-link,
  .cart-link {
    text-decoration: none;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
  }

  .user-icon {
    width: 20px;
    height: 20px;
    stroke: #000;
    fill: none;
  }

  .cart-icon {
    margin-right: 5px;
  }

  .cart-count {
    background: #000;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 14px;
    margin-left: 5px;
  }

  .handheld-navigation {
    display: none;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .handheld-navigation.toggled-on {
    display: flex;
    max-height: 1000px;
  }

  .handheld-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    width: 100%;
  }

  .handheld-navigation ul li {
    padding: 6px 0;
    text-align: left;
  }

  .handheld-navigation ul li a {
    display: block;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* IDA Forzar 2 columnas en móvil (categorías y productos) */
@media (max-width: 767px) {
    ul.products li.product,
    ul.products li.product-category {
        width: 48% !important; /* cada caja ocupa casi la mitad */
        margin: 1% !important; /* deja espacio entre columnas */
        float: left;
        clear: none !important;
    }
}