/* Solo Celulares: Las categorias van en un slider */
@media (max-width: 767.98px) {

  .categorias {
    visibility: hidden;
    position: fixed;
    top: 64px; /* Height of navbar */	
    bottom: 0;
    right: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
		z-index:99999;
  }

  .categorias.open {
    visibility: visible;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); 
  }

	/* Listview: Tamaño de letra */
	.categorias.open span.e-list-text   {
		font-family: 'Source Sans Pro',sans-serif;
		font-size:20px;
	}

	/* Listview: Alto de los items */
	.categorias.open .e-list-item   {
		height:44px;
	}

}

/* TABLETS PARA ARRIBA */
@media (min-width: 768px) {

	.sk3-header {
		padding-bottom:0px;
	}

	.sk3-header-container {
		min-height:90px;
		height:90px;
	}

	/* Las categorias van fijas a la izquierda */ 
	.categorias_container {
		min-width:250px;
		width:250px;
	}

	/* Header: Oculto el boton de mostrar categorias */ 
	.categorias-offcanvas-button {
		display:none;
	}
	.sk3-header-buscador-prepend-categorias {
		display:none;
	}

	/* Dejo margen entre categorias y articulos */
	.articulos_container {
		margin-left:30px;
	}


	/* A partir de este tope queda fixed  */
	.sk3-categorias-sticky-wrapper {
		top:100px; /* Height of navbar */	
	}

	/* Saco la negrita del titulo */
	.categorias .e-headertext {
		font-weight:normal;
	}

	/* Dejo un margen entre el titulo y los items */
	.categorias .e-list-header {
		margin-bottom:23px;
	}

	/* Alto dinamico segun viewport y si hay footer */
	.categorias .e-content {
		height: calc(100vh - 250px - var(--sig-sk3-sig-by-footer-spacer));
		max-height: calc(100vh - 250px - var(--sig-sk3-sig-by-footer-spacer));
		overflow-y:auto;
	}

}


/* Logo */
.sk3-header-logo-small {
	max-width:100px;
	max-height:40px;
	margin-bottom:5px;
}
.sk3-header-logo-large {
	max-width:240px;
	max-height:70px;
	margin-bottom:5px;
}


/* Buscador */
@media (max-width: 767.98px) {
	/* Redondeo de input de busqueda Celulares */
	.sk3-header-buscador-input {
		border-top-right-radius:5px!important;
		border-bottom-right-radius:5px!important;
	}
}
@media (min-width: 768px) {
	/* Redondeo de input de busqueda Desktop */
	.sk3-header-buscador-input {
		border-top-left-radius:5px!important;
		border-bottom-left-radius:5px!important;
	}
	.sk3-header-buscador-icon {
		border-top-right-radius:5px!important;
		border-bottom-right-radius:5px!important;
	}
}
.sk3-header-buscador {
	display:inline-block;
	width:calc(100% - 200px);
}

.sk3-header-catego-spacer {
	/* Spacer para que los otros elementos se alineen verticalmente */
	display:block;
}
@media (min-width: 768px) {
	.sk3-header-buscador {
		width:280px;
	}
	.sk3-header-con-catego {
		padding-bottom:0px;
	}
}
/* En pantallas grandes, agrando el buscador proporcionalmente */
@media (min-width: 1130px) {
	.sk3-header-buscador {
		/*width: calc(200px + 100vw - 1130px);*/
		width:280px;
		max-width: 590px;
	}
}

.sk3-header-buscador-icon {
	cursor:pointer;
}
.sk3-header-buscador-cerrar {
	cursor:pointer;
	background:initial;
	border:0;
	padding-right:0;
	box-shadow:none;
	webkit-box-shadow:none;
}
.sk3-header-buscador-chk {
	margin-top:2px;
}
.sk3-header-buscador-chk-deshabilitado {
	/* Si no hay categoria seleccionada, fuerzo display none al check */
	display:none!important;
}

.sk3-header-buscador-categorias-icon .input-group-text {
	background:initial;
	border:0;
	box-shadow:none;
	webkit-box-shadow:none;
}

/* Buscador Floater para celulares */
.sk3-header-buscador-floater {
	position:absolute;
	z-index:9999;
	border:0;
	padding-right:5px;
}
.sk3-header-buscador-floater form {
	display:inline-block;
	width:calc(100% - 70px)!important;
}
.sk3-header-buscador-floater input[type=search] {
	border:0;
	box-shadow:none;
	webkit-box-shadow:none;
}
.sk3-header-buscador-floater .sk3-header-buscador-icon {
	/* Fuerzo que se muestre cuando se expande el buscador */
	display:flex!important;
}
.sk3-header-buscador-floater .sk3-header-buscador-icon .input-group-text {
	background:initial;
	border:0;
	box-shadow:none;
	webkit-box-shadow:none;
}
.sk3-header-buscador-floater .sk3-header-buscador-cerrar .input-group-text {
	display:inline-block;
	padding-left:10px;
	background:initial;
	border:0;
	box-shadow:none;
	webkit-box-shadow:none;
}
.sk3-header-buscador-floater .sk3-header-buscador-chk {
	margin-top:0px;
 	margin-left:12px;
}


/* Boton Carrito */
.sk3-header-btn-carrito {
  letter-spacing: 1px;
	padding-left:0px;
	padding-right:0px;
}
.sk3-header-btn-carrito .badge {

}

/* Boton Usuario y dropdown */
.sk3-header-btn-user {
  letter-spacing: 1px;
  text-decoration: none;
}
.sk3-header-user-dropdown {
  letter-spacing: 1px;
}
.sk3-header-user-dropdown .dropdown-item {
	margin-bottom:5px;
}

/* Datos del usuario en el dropdown */ 
.sk3-user-dropdown-datos {
	width:300px;
	text-overflow: ellipsis;
	overflow: hidden;
}
@media (max-width: 767.98px) {
	/* En celulares tiene que ser mas chico */
	.sk3-user-dropdown-datos {
		width:calc(100vw - 100px);
	}
}


/* CONTENIDO ******************************************************************/

.categorias-offcanvas-button {
	margin-left:3px;
}

/* Margen top de contenido segun visibilidad del check de categorias */
.sk3-content-container {
	margin-top:75px;
}
@media (min-width: 768px) {
	.sk3-content-container {
		margin-top:120px;
	}
}


/* LISTADO DE ARTICULOS: HEADER DE RESULTADOS *********************************/ 

.sk3-separador {
	opacity: 1;
}

.sk3-resultados-header-icon {
	opacity: 0.4;
}

/* LISTADO DE ARTICULOS: FILTROS **********************************************/

.sk3-ver-dropdown .btn {
	color:#888888;
}
.sk3-vista-dropdown ul {
	/* Fuerzo que el dropdown se alinee a la izquierda y no vuele sobre el */
	/* ticket porque el z-index del sticky del ticket es mas alto y lo pisa */
	inset:0px 0px auto auto!important;
}


/* LISTADO DE ARTICULOS  ******************************************************/ 

.sk3-art-categoria {
	word-break: break-all;
	font-size:smaller;
}

.sk3-art-titulo {
	word-break: break-word;
}

.sk3-art-subtitulo {
	font-size:smaller;
}

/* Boton favoritos */ 
.sk3-art-btn-favorito {
	width:initial;
	background-color:#FFFFFF;
	border-color:#CCCCCC;
	color:red;
	position:absolute;
	top:-18px;
	left:-11px;
	z-index:10;
	/* padding reducido para achicar el circulo */
	padding-top:3px;
	padding-bottom:3px;
	padding-left:7px;
	padding-right:7px;
}
.sk3-art-btn-favorito:hover {
	color:#dc3545;
	background-color:#FFFFFF;
	border-color:#CCCCCC;
	/* Agrando el circulo en hover */
	top:-18px;
	left:-11px;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
}
.sk3-favorito-activo {
	color:red!important;
}




/* POPUP AGREGAR ARTICULO *****************************************************/

#agregar_modal .modal-dialog {
 	width:340px;
}


/* TICKET *********************************************************************/

.sk3-ticket {
	font-size:small;
}

.sk3-ticket-header-icon {
	opacity: 0.4;
}

/* A partir de este tope queda fixed. Diferente segun haya o no check de categorias */
.sk3-ticket-sticky-wrapper {
	top:100px;
}
.sk3-content-container-con-catego .sk3-ticket-sticky-wrapper {
	top:100px;
}
.sk3-ticket-sticky-wrapper-conmegamenu {
	/* Si esta el MegaMenu hay que dejar mas espacio */
	top:158px;
}


/* Alto segun viewport */
.sk3-ticket-scrollable {
	max-height: calc(100vh - 310px);
	overflow-y:auto;
}




/* CAROUSEL *******************************************************************/

/* Para forzar containers de carousel con proporcion 5:3 */
/* Se configura segun la variable del conf SK3_ForzarProporcionCarousel (S/N) */
.sk3-carousel-forzar-proporcion .square {
  position: relative;
  width: 100%;
}
.sk3-carousel-forzar-proporcion .square:after {
  content: "";
  display: block;
  padding-bottom: 60%;
}
.sk3-carousel-forzar-proporcion .content {
  position: absolute;
  width: 100%;
  height: 100%;
}


/* Powered By SIG *************************************************************/

.sk3-sig-by, .sk3-sig-by a {
	line-height: 70%;
	color:#AAAAAA;
	font-family:'Source Sans Pro',sans-serif;
	font-size:x-small;
}

/* Oculto el sig by de categorias en celus */
@media (max-width: 767.98px) {
	.sk3-sig-by-categorias {
		display:none;
	}
}

/* Oculto el sig by de articulos en desktop */
@media (min-width: 768px) {
	.sk3-sig-by-articulos {
		display:none;
	}
}

/* FOOTER PARA TAWK.TO Y BOTON ARREPENTIMIENTO ********************************/ 

.sk3-boton-arrepentimiento {
	cursor:pointer;
	line-height:1;
	font-size:80%
}

.sk3-tawkto-trigger {
	cursor: pointer;
}

/* BOTON WHATSAPP *************************************************************/ 
.sk3-whatsapp-button {
	position:absolute;
	bottom:5px;
	right:5px;
	width:42px;
	height:42px;
	background-color:green;
}

/* PLACEHOLDERS **************************************************************/
.placeholder {
	background-color:#DDDDDD;
}
.placeholder-glow .card {
	border-color:transparent;
}




/* MEGA MENU ******************************************************************/
.mega-menu-wrapper {
	top:98px;
	/* Uno mas que sticky para que pase por encima del ticket */
	z-index: 1021; 
}
/* mini reset */
.mega-menu-wrapper .nav,
.mega-menu-wrapper .nav a,
.mega-menu-wrapper .nav li,
.mega-menu-wrapper .nav ul {
  border: none;
  margin: 0;
  padding: 0;
}
.mega-menu-wrapper .nav a {
  text-decoration: none;
}
.mega-menu-wrapper .nav li {
  list-style: none;
}
/* menu container */
.mega-menu-wrapper .nav {
  width:100%;
  cursor: default;
  display: inline-block;
  position: relative;
}
/* menu links */
.mega-menu-wrapper .mega-menu-header-item, .mega-menu-wrapper .nav > li > a,
.sk3-header-spacermenu-container .mega-menu-header-item, .sk3-header-spacermenu-container .nav > li > a {
/*	cursor: pointer;*/
  display: block;
  line-height: 2.5;
  padding: 0 1.25em;
  position: relative;
}
/* menu dropdown */
.mega-menu-wrapper .mega-menu {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  position: absolute;
	left:0;
	right:0;
  margin-left: auto; 
  margin-right: auto; 
  transition: all .3s ease .15s;
  visibility: hidden;
  width: 90%;
	max-width:1200px;
	min-height:10vh;
	max-height:550px;
	overflow-y:auto;
	overflow-x:auto;
	z-index: 1022; 
	padding-bottom:10px;
}
.mega-menu-wrapper .mega-menu:empty {
	min-height:0;
	border:0px;
	padding-bottom:0;
}
li:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
}
/* menu content */
.mega-menu-wrapper .mega-menu .nav-column {
	padding-top:0.5em;
	min-width:200px;
	max-width:300px;
	font-size:small;
}
.mega-menu-wrapper .mega-menu .nav-column ul:not(:empty) {
	padding-bottom:15px;
}
.mega-menu-wrapper .mega-menu .nav-column li {
  margin-top:0.7em;
}
.mega-menu-wrapper .mega-menu .nav-column a {
  display: block;
  line-height: 1;
}