/* ============================================================
   RESET BÁSICO
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: 'Poppins', sans-serif;
  background: #f5f5f5;
  overflow-x: hidden;
  color: #222;
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-container { padding: 10px 0; text-align:center; background:white; }
.logo { width: 180px; height:auto; }

/* ============================================================
   BARRA SUPERIOR MOBILE
   ============================================================ */
.top-mobile-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#175AED;
  color:#fff;
  padding:8px 12px;
  gap:8px;
}
.top-mobile-bar .menu_btn, .top-mobile-bar .info_btn {
  cursor:pointer;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

/* icon placeholders */
.icon-toggle::before { content: "\2630"; /* ☰ */ font-size:18px; }
.icon-toggle-info::before { content: "\2139"; /* ℹ */ font-size:18px; }
.icon-cross::before { content: "\2715"; /* ✕ */ }

/* ============================================================
   MENÚ LATERAL (categorías) - MÓVIL (sale desde la IZQUIERDA)
   ============================================================ */
.side-menu {
  position:fixed;
  top:0;
  left:-100%;
  width:78%;
  height:100vh;
  background:#175AED;
  color:white;
  padding:70px 8px 20px 8px;
  overflow-y:auto;
  transition:left .28s ease;
  z-index:1200;
}
.side-menu.open { left:0; }

/* lista */
.side-menu ul{ list-style:none; padding:0; margin:0; }
.side-menu li{ border-bottom:1px solid rgba(255,255,255,0.06); }
.side-menu a{ color:white; display:block; padding:12px 14px; text-decoration:none; font-weight:600; }
.side-menu a:hover{ background: rgba(255,255,255,0.06); }

/* sublista móvil */
.side-menu .dropdown-content { display:none; background: rgba(255,255,255,0.03); }
.side-menu .dropdown.open .dropdown-content { display:block; }
.side-menu .dropdown-content a { padding-left: 28px; font-weight:400; }

/* ============================================================
   MENÚ INFO - MÓVIL (sale desde la DERECHA)
   ============================================================ */
.info-menu {
  position:fixed;
  top:0;
  right:-100%;
  width:78%;
  height:100vh;
  background:#1FBBF5;
  color:white;
  padding:70px 8px 20px 8px;
  overflow-y:auto;
  transition:right .28s ease;
  z-index:1199;
}
.info-menu.open { right:0; }

.info-menu ul{ list-style:none; padding:0; margin:0; }
.info-menu li a{ color:white; display:block; padding:12px 14px; text-decoration:none; font-weight:600; }
.info-menu a:hover{ background: rgba(255,255,255,0.06); }

/* ============================================================
   SEARCH
   ============================================================ */
.mobile-search input,
.search-pc input {
  width: 60%;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #999595;
  font-size:14px;
  background:#E3E8E9
}

/* PC search hidden on mobile */
.search-pc { display:none; margin:12px 0; text-align:center; }

/* ============================================================
   USER AREA + CARRITO
   ============================================================ */
.user-area { background:white; padding:6px 12px; font-size:15px; text-align:center; }
.user-area a { color:#175AED; text-decoration:none; margin-left:6px; }
.cart a { font-weight:bold; color:#175AED; }

/* ============================================================
   PRODUCT GRID (usar Bootstrap row/col)
   ============================================================ */
.container { padding: 12px; }
.product-card {
  background:white;
  padding:15px;
  border-radius:8px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  min-height:220px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.product-card img {
  width:100%;
  height:160px;
  object-fit:contain;
  border-radius:6px;
}

/* texto centrado y limpio */
.product-card h4, .product-card h6, .product-card p {
  text-align:center;
  margin:0;
  color:#222;
}

/* botones */
.btn-add, .btn { border-radius:8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { margin-top: 20px; padding:16px; background:#eee; text-align:center; }

/* ============================================================
   MODO DESKTOP (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
    .top-mobile-bar { display: none !important; }

    /* ocultar menús móviles en desktop */
    .side-menu, .info-menu { display:none !important; }


   /* Control absoluto del tamaño de la imagen principal */
#main-image {
    width: auto !important;
    max-width: 80% !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Evita que Bootstrap img-fluid rompa los límites */
#main-image.img-fluid {
    height: auto !important;
    max-height: 80vh !important;
}




    /* categories pc */
    .categories-pc {
        display: flex !important;
        justify-content: center;
        background: #175AED;
        padding: 10px 0;
        text-align: center;
    }

    .categories-pc .cat-list {
        display: flex;
        gap: 25px;
        list-style: none;
        padding: 0;
        margin: 0;
        color:#fff;
        align-items:center;
    }

    .cat-item { position: relative; color:#fff; }

    .categories-pc .sub-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        padding: 10px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        list-style: none;
        min-width: 180px;
        z-index: 9999;
    }

    .categories-pc .cat-item:hover .sub-list { display:block; }

    .categories-pc .sub-list li { padding: 6px 15px; text-align:left; }
    .categories-pc .sub-list li a { color: #444; text-decoration:none; }
    .categories-pc .sub-list li a:hover { color:#000; }

    .categories-pc { cursor: default !important; }
    .cat-link { cursor: default !important; color:#fff; }

    /* PC search visible */
    .search-pc { display:block; margin:8px auto; }

    /* Ajustes de layout desktop */
    .product-grid { grid-template-columns: repeat(5, 1fr); gap:16px; padding:12px 18px; }
    .logo { width:250px; }
    .user-area { text-align:right; padding-right:24px; }
    .product-card { min-height:200px; }
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.hidden { display:none !important; }
.center { text-align:center; }
.kv { font-size:13px; color:#555; }
.code-size {font-size:13px; color:#ff0000;}

/* DROPDOWN CATEGORÍAS (móvil) */
.dropdown .dropdown-content { display: none; margin-left: 15px; }
.dropdown.open .dropdown-content { display: block; }